/* =========================
  THEME TOKENS (Dark default)
========================== */
:root{
  --radius-lg:14px; --radius-sm:8px; --radius-xl:24px;
  --shadow-soft:0 18px 40px rgba(0,0,0,.35);

  --accent:#38bdf8;
  --accent-2:#a855f7;
  --success:#22c55e;
  --danger:#f97373;

  --text:#e5e7eb;
  --muted:#9ca3af;

  --page-bg: radial-gradient(circle at top, #1f2937 0, #020617 55%);
  --shell-bg: linear-gradient(145deg, #020617 0, #020617 40%, #020617 100%);
  --shell-border: rgba(148,163,184,.25);

  --card-bg:
    radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 45%),
    radial-gradient(circle at bottom right, rgba(168,85,247,.10), transparent 50%),
    #1f2937;
  --card-border: rgba(148,163,184,.30);
  --card-shadow: 0 10px 30px rgba(0,0,0,.35);

  --surface: rgba(15,23,42,.90);
  --surface-2: rgba(15,23,42,.98);
  --surface-border: rgba(148,163,184,.60);
  --surface-border-2: rgba(75,85,99,.90);

  --row-bg:
    radial-gradient(circle at top left, rgba(56,189,248,.13), transparent 55%),
    rgba(15,23,42,.95);
  --row-border: rgba(55,65,81,.90);

  --kpi-bg: linear-gradient(135deg, rgba(15,23,42,.90), rgba(15,23,42,.98));
  --kpi-border: rgba(148,163,184,.35);
  --kpi-shadow: 0 10px 26px rgba(0,0,0,.40);

  --chip-bg: rgba(15,23,42,.80);
  --tabs-bg: rgba(15,23,42,.85);
  --link-bg: rgba(15,23,42,.90);

  --input-bg: rgba(15,23,42,.98);
  --input-focus: rgba(15,23,42,1);

  --shell-glow:
    radial-gradient(circle at 0% 0%, rgba(56,189,248,.20), transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(168,85,247,.16), transparent 60%);
  --shell-glow-opacity:.35;

  --border: rgba(148,163,184,.22);
}

/* Light mode swaps variables only */
body.light{
  --text:#020617;
  --muted:#4b5563;

  --page-bg: radial-gradient(circle at top, #e0f2fe 0, #f9fafb 55%);
  --shell-bg: linear-gradient(145deg, #ffffff 0, #e5f0ff 100%);
  --shell-border: rgba(148,163,184,.50);

  --card-bg:
    radial-gradient(circle at top left, rgba(59,130,246,.10), transparent 55%),
    #ffffff;
  --card-border: rgba(148,163,184,.60);
  --card-shadow: 0 12px 30px rgba(15,23,42,.12);

  --surface: rgba(255,255,255,.85);
  --surface-2: rgba(255,255,255,.92);
  --surface-border: rgba(148,163,184,.65);
  --surface-border-2: rgba(148,163,184,.65);

  --row-bg: rgba(255,255,255,.92);
  --row-border: rgba(148,163,184,.65);

  --kpi-bg: rgba(255,255,255,.92);
  --kpi-border: rgba(148,163,184,.65);
  --kpi-shadow: 0 10px 26px rgba(15,23,42,.10);

  --chip-bg: rgba(255,255,255,.85);
  --tabs-bg: rgba(255,255,255,.85);
  --link-bg: rgba(255,255,255,.85);

  --input-bg: rgba(255,255,255,.92);
  --input-focus: rgba(255,255,255,1);

  --shell-glow-opacity:.22;
}
/* Light mode: improve Edit Trip helper text readability */
body.light .hint,
body.light .help-text,
body.light #form-subtitle,
body.light #autosave-status,
body.light .trip-modal-body #trip-form-card .card-header small{
  color: #475569; /* slate-600 */
  font-weight: 500;
  opacity: 1;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  background: var(--page-bg);
  color: var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:clamp(8px,3vw,20px);
}

.app-shell{
  width:100%;
  max-width:1800px;
  background: var(--shell-bg);
  border-radius: var(--radius-xl);
  border:1px solid var(--shell-border);
  box-shadow: var(--shadow-soft);
  padding:20px 20px 16px;
  position:relative;
  overflow:hidden;
}
.app-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--shell-glow);
  opacity: var(--shell-glow-opacity);
  pointer-events:none;
}
.app-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
main{
  flex: 1 1 auto;
}

.site-footer{
  margin-top: auto;
  width: 100%;
  text-align: center;
  padding: 12px 8px;
  font-size: 0.8rem;
  color: var(--muted);
}


header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:12px;
}

.title{ display:flex; flex-direction:column; gap:2px; }
.title h1{
  margin:0;
  font-size:clamp(1rem,1.2vw + .9rem,1.4rem);
  letter-spacing:.03em;
  display:flex;
  align-items:center;
  gap:10px;
}
.title small{ font-size:.78rem; color:var(--muted); }

.logo-img{
  width:48px;
  height:48px;
  border-radius:8px;
  object-fit:cover;
  box-shadow:0 0 24px rgba(56,189,248,.35);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
/* header: title left, actions right */
header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

/* RIGHT stacked column */
.header-actions{
  margin-left:auto;
  display:flex;
  flex-direction:column;     /* stack */
  align-items:flex-end;       /* right align items */
  gap:10px;
  width:fit-content;          /* don't fill the whole header */
}

/* keep the tabs row right sized */
.header-actions .tabs{
  width:fit-content;
  max-width:100%;
  justify-content:flex-end;
}

/* backup/action rows */
.action-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
  width:fit-content;
}

.action-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  width:fit-content;
}

/* prevent buttons from stretching wide */
.header-actions .btn,
.header-actions .pill-link{
  width:auto;
}
@media (max-width:900px){
  header{ flex-direction:column; }
  .header-actions{ align-self:flex-end; } /* keep it pinned to right */
}


.chip{
  font-size:.7rem;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  color:var(--muted);
  background: var(--chip-bg);
  backdrop-filter: blur(12px);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.chip-dot{
  width:6px;height:6px;border-radius:999px;
  background:#4ade80;
  box-shadow:0 0 10px rgba(74,222,128,.9);
}

.tabs{
  display:inline-flex;
  border-radius:999px;
  padding:3px;
  background: var(--tabs-bg);
  border:1px solid var(--surface-border);
  backdrop-filter: blur(12px);
}
.tab-btn{
  border:none;
  background:transparent;
  color:var(--muted);
  padding:6px 14px;
  font-size:.8rem;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .2s ease;
}
.tab-btn.active{
  background: radial-gradient(circle at top left, var(--accent), #0ea5e9);
  color:#fff;
  box-shadow:0 0 20px rgba(56,189,248,.55);
}
.tab-btn .icon{ font-size:.9rem; }
.tabs a.tab-btn{ text-decoration:none; }

/* Pulse the Alerts icon on desktop when checklist issues exist */
.tab-btn.has-alerts[data-tab="checklist"] .icon{
  animation: alertsPulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .tab-btn.has-alerts[data-tab="checklist"] .icon{ animation: none; }
}

.pill-link{
  font-size:.7rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  color:var(--muted);
  background: var(--link-bg);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .18s ease;
  white-space:nowrap;
  cursor:pointer;
}
.pill-link:hover{ filter: brightness(1.03); color: var(--text); }

main{ margin-top:12px; }

#view-dashboard .grid{
  display:grid;
  gap:14px;
  /* Screenshot-style dashboard: stacked cards, centered */
  grid-template-columns: 1fr;
  max-width: 1120px;
  margin: 0 auto;
}

/* KPI layout: 5 across on desktop (2 rows for 10 KPIs), scales down on smaller screens */
#view-dashboard .kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:12px;
}

.kpi{
  background: var(--kpi-bg);
  border-radius:14px;
  padding:12px 14px;
  border:1px solid var(--kpi-border);
  box-shadow: var(--kpi-shadow);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-height:116px;
}
.kpi::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,#38bdf8,#a855f7);
  opacity:.95;
  pointer-events:none;
}
body.light .kpi::before{ opacity:.85; }

.kpi-label{
  font-size:.72rem;
  line-height:1.1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  min-height:16px;
  margin-bottom:6px;
}
.kpi-value{
  margin-top:0;
  font-size:2rem;
  line-height:1.05;
  font-weight:800;
  min-height:42px;
  display:flex;
  align-items:center;
  color:var(--text);
}
.kpi-sub{
  margin-top:4px;
  font-size:.82rem;
  line-height:1.25;
  color:var(--muted);
  min-height:20px;
}

@media (max-width: 1100px){
  #view-dashboard .kpi-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  #view-dashboard .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
  .kpi{ padding:10px 12px; min-height:104px; }
  .kpi-label{ margin-bottom:3px; }
  .kpi-value{ font-size:1.65rem; min-height:30px; }
  .kpi-sub{ font-size:.76rem; min-height:16px; }
}

.kpi-pill{
  position:absolute;
  right:8px; top:8px;
  font-size:.7rem;
  padding:3px 8px;
  border-radius:999px;
  background: var(--surface);
  border:1px solid var(--surface-border);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.kpi-pill .dot{
  width:7px;height:7px;border-radius:999px;
  background: var(--success);
  box-shadow:0 0 8px rgba(34,197,94,.9);
}

.trip-list{
  max-height: min(80vh, 1100px);
  overflow: auto;
  padding-right: 4px;
  margin-top: 2px;
  scrollbar-width: thin;
}
/* ===== Dashboard — show ALL upcoming trips (no internal scroll) ===== */
#view-dashboard .trip-list{
  max-height: none !important;
  overflow: visible !important;
}
/* ===== Trips tab — show ALL trips (no internal scroll) ===== */
#view-trips .trip-list{
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

/* Big screens: show even more */
@media (min-width: 1100px){
  .trip-list{
    max-height: min(78vh, 980px);
  }
}


.trip-row{
  border-radius:10px;
  padding:8px 9px;
  border:1px solid var(--row-border);
  background: var(--row-bg);
  margin-bottom:7px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.trip-main{ flex:1; }
.trip-name{ font-size:.9rem; font-weight:600; margin-bottom:2px; }
.trip-meta{
  font-size:.75rem;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}



/* Trips tab compact icon guide */
.trip-meta-help-btn{
  appearance:none;
  border:1px solid rgba(148,163,184,.55);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--muted);
  width:18px;
  height:18px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(15,23,42,.08);
}
.trip-meta-help-btn:hover{
  color:var(--accent);
  border-color:color-mix(in srgb, var(--accent) 55%, rgba(148,163,184,.55));
  transform:translateY(-1px);
}
.trip-meta-help-modal .status-help-item{
  padding:5px 0;
}

.trip-flights{
  margin-top:6px;
  display:grid;
  gap:5px;
}

.trip-flight-row{
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.48);
  border-radius:999px;
  padding:5px 6px 5px 9px;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  box-shadow:none;
}

.trip-flight-left{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
}

.trip-flight-title{
  font-weight:650;
  font-size:.76rem;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.trip-flight-sub{
  order:-1;
  flex:0 0 auto;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
  margin-top:0;
}

.trip-flight-actions{
  display:flex;
  gap:4px;
  align-items:center;
}

.trip-flight-actions .btn{
  min-height:24px;
  padding:3px 8px;
  font-size:.68rem;
  border-radius:999px;
}

.trip-flight-note{
  display:none;
}

.trip-flight-note.warn{
  display:block;
  grid-column:1 / -1;
  font-size:.68rem;
  color: var(--warn);
  padding-left:2px;
}

.trip-flight-row .btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

@media (max-width: 640px){
  .trip-flight-row{
    border-radius:14px;
    grid-template-columns: 1fr;
    align-items:flex-start;
  }
  .trip-flight-left{
    width:100%;
  }
  .trip-flight-actions{
    width:100%;
  }
  .trip-flight-actions .btn{
    flex:1;
  }
}


.badge{
  padding:2px 6px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  font-size:.72rem;
  background: var(--surface);
  color: var(--muted);
}

#view-ports .trip-list{ max-height:none; overflow:visible; padding-right:0; }
#view-ports .trip-row{ padding:6px 8px; margin-bottom:6px; }
#view-ports .trip-name{ font-size:.88rem; }
#view-ports .trip-meta{ gap:6px; font-size:.72rem; }

.trip-actions{ display:flex; flex-direction:column; gap:4px; }

.btn{
  border:none;
  border-radius:999px;
  padding:5px 10px;
  font-size:.7rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  background: var(--surface);
  color: var(--muted);
  border:1px solid var(--surface-border);
  transition:all .18s ease;
  text-decoration:none;
  white-space:nowrap;
}
.btn:hover{ filter: brightness(1.03); color: var(--text); }

.btn-primary{
  background: linear-gradient(135deg, #0ea5e9, var(--accent));
  border-color:transparent;
  color:#fff;
  box-shadow:0 0 16px rgba(56,189,248,.55);
}
.btn-primary:hover{ filter: brightness(1.05); }

.btn-danger{
  border-color: rgba(248,113,113,.70);
  color: #fecaca;
}
body.light .btn-danger{ color:#b91c1c; border-color: rgba(239,68,68,.55); }
.btn-danger:hover{ background: rgba(239,68,68,.10); }

form{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.field-row{ display:flex; gap:8px; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:3px; flex:1; }
.field-row .field{ flex:1 1 160px; }

label{ font-size:.7rem; color:var(--muted); }

/* Ship list status note (next to Ship label) */
.ship-status{
  margin-left: 8px;
  font-size: .68rem;
  color: var(--muted);
  font-weight: 600;
}
.ship-status.ok{ color: var(--success); }
.ship-status.warn{ color: var(--warn, #fb923c); }

input, textarea, select{
  border-radius: var(--radius-sm);
  border:1px solid var(--surface-border-2);
  padding:5px 8px;
  background: var(--input-bg);
  color: var(--text);
  font-size:.78rem;
  font-family:inherit;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, textarea:focus{
  border-color: var(--accent);
  box-shadow:0 0 0 1px rgba(56,189,248,.55);
  background: var(--input-focus);
}
textarea{ resize:vertical; min-height:60px; }

.form-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:2px;
  gap:8px;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.7rem;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background: var(--surface);
  color: var(--muted);
}
.pill-dot{ width:6px;height:6px;border-radius:999px; }
.pill-dot.green{ background:#22c55e; }
.pill-dot.orange{ background:#fb923c; }

.ports-list{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.port-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  font-size:.74rem;
  background: var(--surface);
  color: var(--muted);
}

.port-name{ font-weight:650; color: var(--text); }

.port-actions{ display:inline-flex; align-items:center; gap:6px; }
.port-btn{
  border:1px solid var(--surface-border);
  background: var(--card-bg);
  color: var(--text);
  cursor:pointer;
  padding:6px 8px;
  border-radius:10px;
  font-size:.78rem;
  line-height:1;
  min-width:36px;
  min-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.port-btn:active{ transform: translateY(1px); }
.port-btn.danger{ color:#ef4444; }

.port-pill button{ /* legacy safety */
  border:none;
  background:transparent;
}

.port-hide-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:6px;
  font-size:.68rem;
  color: var(--muted);
  user-select:none;
}
.port-hide-toggle input{ transform: translateY(1px); cursor:pointer; }

/* =========================
  TRIP ADD-ONS (WiFi / Starbucks / Vibe)
========================== */
.addons{
  border:1px solid var(--surface-border);
  background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(168,85,247,.08));
  border-radius:16px;
  padding:10px;
  margin-top:6px;
}
.addons-title{
  font-weight:750;
  font-size:.82rem;
  letter-spacing:.01em;
  margin-bottom:8px;
  color: var(--text);
}
.addons-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
.addon-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 10px;
  border-radius:14px;
  border:1px solid var(--surface-border);
  background: var(--card-bg);
  cursor:pointer;
  user-select:none;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.addon-toggle input{ display:none; }
.addon-chip{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--surface-border);
  background: var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.addon-icon{ width:18px; height:18px; object-fit:contain; display:block; }
.addon-text{ font-weight:700; font-size:.82rem; color: var(--text); }
.addon-toggle:has(input:checked){
  border-color: rgba(56,189,248,.75);
  box-shadow: 0 0 0 2px rgba(56,189,248,.25), 0 10px 28px rgba(0,0,0,.22);
}
.addon-toggle:has(input:checked) .addon-chip{
  border-color: rgba(56,189,248,.75);
  background: rgba(56,189,248,.16);
}
.addons-extra{ margin-top:10px; }

@media (max-width:600px){
  .ports-list{ gap:10px; }
  .port-pill{ width:100%; justify-content:space-between; border-radius:16px; }
  .port-actions{ gap:8px; }
  .port-btn{ min-width:44px; min-height:40px; border-radius:12px; }
  .port-hide-toggle{ margin-left:0; }

  .addons-grid{ grid-template-columns: 1fr; }
  .addon-toggle{ padding:12px; }
  .addon-chip{ width:40px; height:40px; border-radius:14px; }
  .addon-text{ font-size:.92rem; }
}

.help-text{ font-size:.68rem; color:var(--muted); margin-top:2px; }
.empty{ font-size:.78rem; color:var(--muted); margin-top:6px; }

/* =========================
  LOGIN MODAL
========================== */
.modal-backdrop{
  position:fixed; inset:0; z-index:999999;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal{
  width:min(520px, 100%);
  background: var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:18px;
  box-shadow: var(--shadow-soft);
  padding:14px;
}
.modal h3{
  margin:0 0 6px;
  font-size:1rem;
  letter-spacing:.02em;
}
.modal p{
  margin:0 0 10px;
  color: var(--muted);
  font-size:.82rem;
  line-height:1.35;
}
.modal .row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  margin-top:10px;
}
.username-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.7rem;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  color:var(--muted);
  background: var(--chip-bg);
  white-space:nowrap;
}

/* Dashboard trip notes timer */
.trip-inline-timer{ margin-top:6px; }
.trip-inline-timer .countdown{
  font-size:1.05rem;
  font-weight:650;
  margin-top:2px;
}
.trip-inline-timer .count-label{
  font-size:.78rem;
  color:var(--muted);
  margin-top:2px;
  margin-bottom:10px;
}

/* Site footer */
.site-footer{
  margin-top: 28px;
  padding: 14px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #9ca3af);
  border-top: 1px solid var(--border, rgba(148,163,184,.22));
}
.site-footer a{
  color: var(--accent, #38bdf8);
  text-decoration: none;
  font-weight: 500;
}
.site-footer a:hover{
  text-decoration: underline;
}
.footer-sep{
  margin: 0 8px;
  opacity: 0.6;
}

@media (max-width:900px){
  body{ padding:12px; }
  .app-shell{ padding:14px 14px 12px; border-radius:18px; }
  header{ flex-direction:column; align-items:flex-start; gap:8px; }
  .header-actions{ width:100%; justify-content:space-between; }
  
}
@media (max-width:600px){
  body{ padding:10px; }
  .app-shell{ padding:10px 10px 12px; border-radius:14px; }
  .title h1{ font-size:clamp(.95rem,3.5vw,1.2rem); }
  .title small{ font-size:.7rem; }
  .chip{ width:100%; justify-content:center; }
  .tabs{ width:100%; justify-content:space-between; }
  .tab-btn{ flex:1; justify-content:center; padding:6px 8px; font-size:.75rem; }
  .grid{ gap:10px; }
  .card-header{ flex-direction:column; align-items:flex-start; gap:4px; }
  .trip-row{ flex-direction:column; }
  .trip-actions{ flex-direction:row; width:100%; flex-wrap:wrap; }
  .trip-actions .btn{ flex:1 1 120px; }
  input, textarea{ font-size:.76rem; }
  .field-row{ flex-direction:column; }
}


/* Excursion notes: show first 2 lines with expand */
.exc-notes-clamp{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.exc-notes-full{ }
.exc-notes-toggle{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background: var(--surface);
  font-size:.72rem;
  color:var(--accent);
  cursor:pointer;
  user-select:none;
}


/* Wider layout for Trips tab (All Trips + Add Trip cards) */
#view-trips .grid{
  grid-template-columns: 1.25fr 1fr;
}
@media (max-width: 912px){
  #view-trips .grid{ grid-template-columns: 1fr; }
}

.exc-notes{ white-space: pre-wrap; }


/* === Trip Planner (embedded) styling === */

.trip-planner{ margin-top:10px; }
.trip-planner details{
  border:1px solid var(--border);
  border-radius:16px;
  background: var(--surface);
  padding:10px;
}
.trip-planner summary{
  cursor:pointer;
  font-weight:750;
  letter-spacing:.01em;
  list-style:none;
  padding:10px 12px;
  border-radius:14px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 55%),
    radial-gradient(circle at top right, rgba(168,85,247,.12), transparent 60%),
    var(--surface-2);
  border:1px solid rgba(148,163,184,.18);
  user-select:none;
}
.trip-planner summary::-webkit-details-marker{ display:none; }
.trip-planner details[open] summary{ margin-bottom:10px; }



/* Trip Planner: Excursions narrow (right), Daily Agenda wide (left) */
.trip-planner .planner-sections{
  grid-template-columns: 1fr minmax(240px, 340px) !important;
}

@media (max-width:980px){
  .planner-sections{ grid-template-columns:1fr; }
}

@media (max-width:980px){
  .planner-sections{ grid-template-columns:1fr; }
}

.planner-section{
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.10), transparent 55%),
    var(--surface-2);
  padding:12px;
}
.planner-section h4{
  margin:0 0 10px;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}

.planner-list{ display:flex; flex-direction:column; gap:8px; }

.planner-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.60);
}
body.light .planner-item{ background: rgba(255,255,255,.75); }

.planner-check{ transform: translateY(2px); cursor:pointer; }
.planner-text{ flex:1; min-width:0; }
.planner-title{
  font-weight:750;
  font-size:.92rem;
  margin:0;
  line-height:1.2;
}
.planner-title a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
}
.planner-sub{
  margin-top:4px;
  color:var(--text);
  opacity:.92;
  font-size:.82rem;
  line-height:1.25;
  word-break:break-word;
}
.planner-sub.muted{ color:var(--muted); opacity:1; }

.planner-actions{ display:flex; gap:8px; align-items:flex-start; }
.planner-actions .btn{ padding:6px 10px; }
.planner-actions .btn.btn-danger{ padding:6px 10px; }

.planner-add{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  align-items:center;
}
.planner-add input, .planner-add select{ width:100%; }
.planner-add .btn{ justify-self:start; }
@media (max-width:600px){
  .planner-add{ grid-template-columns:1fr; }
  .planner-add .btn{ width:100%; }
}

.planner-mini-note{
  margin-top:10px;
  font-size:.72rem;
  color:var(--muted);
}

/* Daily Agenda columns */
.agenda-days{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin-top:4px;
}
.agenda-day{
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  background: rgba(15,23,42,.55);
  padding:10px;
}
body.light .agenda-day{ background: rgba(255,255,255,.75); }
.agenda-day h5{
  margin:0 0 8px;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.10em;
  text-transform:uppercase;
}


/* Agenda day card (FIX: mobile box missing) */
.agenda-day-card{
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  background: rgba(15,23,42,.55);
  padding:10px;
}

body.light .agenda-day-card{ background: rgba(255,255,255,.75); }

.agenda-day-title{
  margin:0 0 8px;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:750;
}

.agenda-drop{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:40px;
  padding:8px;
  border-radius:12px;
  border:1px dashed rgba(148,163,184,.25);
  background: rgba(2,6,23,.10);
}
body.light .agenda-drop{ background: rgba(2,6,23,.04); }

.agenda-drag{
  cursor:grab;
  font-size:18px;
  line-height:1;
  opacity:.8;
  margin-right:4px;
  user-select:none;
}


/* =========================
   Daily Agenda - flat list styling
========================= */
.agenda-drop-flat{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:rgba(2,6,23,.35);
}

.ag-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.55);
  font-weight:700;
  letter-spacing:.2px;
}

.ag-time{
  opacity:.9;
  font-weight:600;
}

.planner-item.agenda-item .planner-sub{
  margin-top:6px;
}

.planner-item.agenda-item .planner-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* =========================
   Daily Agenda inline edit mode
========================= */
.agenda-item .ag-editform{ display:none; margin-top:10px; }
.agenda-item.is-editing .ag-view{ display:none; }
.agenda-item.is-editing .ag-editform{ display:block; }
.agenda-item.is-editing .ag-actions{ display:none; }

.ag-editform .ag-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width:520px){
  .ag-editform .ag-grid{ grid-template-columns:1fr; }
}

.ag-editform textarea.ag-in-notes{
  margin-top:10px;
  min-height:64px;
  resize:vertical;
}

.ag-edit-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:10px;
}



/* =========================
  PLANNER POLISH
========================== */
.exc-notes-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  margin-top:6px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background: var(--surface);
  color: var(--muted);
  font-size:.72rem;
  cursor:pointer;
  user-select:none;
}
.exc-notes-toggle:hover{ color: var(--text); filter: brightness(1.03); }

.agenda-item{ position:relative; }
.agenda-item .planner-actions{ display:flex; gap:6px; align-items:center; }

.ag-editform{
  display:none;
  width:100%;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--surface-border);
}
.agenda-item.is-editing .ag-view{ display:none; }
.agenda-item.is-editing .ag-editform{ display:block; }

.ag-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 2fr 1fr;
  gap:8px;
  margin-bottom:8px;
}
@media (max-width: 680px){
  .ag-grid{ grid-template-columns: 1fr 1fr; }
}
.ag-editform input, .ag-editform textarea{
  width:100%;
  border-radius:12px;
  padding:8px 10px;
  border:1px solid var(--surface-border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
}
body.light .ag-editform input, body.light .ag-editform textarea{
  background: rgba(0,0,0,.03);
  color: var(--text);
}
.ag-editform textarea{ min-height:64px; resize:vertical; }



/* Agenda inline edit buttons */
.icon-btn{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.28);
  color: var(--text);
  cursor:pointer;
  flex:0 0 auto;
}
.icon-btn:hover{ border-color: rgba(56,189,248,.45); }
.icon-btn:active{ transform: translateY(1px); }
body.light .icon-btn{ background: rgba(255,255,255,.65); }

.agenda-edit-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  width:100%;
}
.agenda-edit-grid input{
  width:100%;
  min-width:0;
}
@media (max-width: 560px){
  .agenda-edit-grid{ grid-template-columns: 1fr; }

.exc-edit-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  width:100%;
}
.exc-edit-grid input, .exc-edit-grid select{
  width:100%;
  min-width:0;
}
@media (max-width: 560px){
  .exc-edit-grid{ grid-template-columns: 1fr; }
}
}
/* =========================
   MOBILE: SINGLE COLUMN
========================== */
@media (max-width: 768px) {
  /* Dashboard + Trips grids */
  #view-dashboard .grid,
  #view-trips .grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
   Daily Agenda: 2 columns on desktop
   (keeps 1 column on smaller screens)
========================== */
@media (min-width: 1000px){
  .trip-planner .agenda-days{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}
@media (max-width: 999px){
  .trip-planner .agenda-days{
    grid-template-columns: 1fr;
  }
}

/* Trip planner + deck buttons */
.trip-planner-buttons{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.trip-planner-details > summary,
.trip-planner-deck-btn{
  list-style: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid var(--surface-border);
  background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(168,85,247,.12));
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  transition: all .18s ease;
  text-decoration: none;
  display: block;
}

.trip-planner-details > summary:hover,
.trip-planner-deck-btn:hover{
  filter: brightness(1.08);
}
/* Make Trip Planner and Deck Plan buttons EXACT same size */
.trip-planner-details > summary,
.trip-planner-deck-btn{
  height: 44px;                 /* force same height */
  display: flex;               /* align icon + text same way */
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
}

/* Remove default marker spacing differences */
.trip-planner-details > summary::-webkit-details-marker{
  display: none;
}
.trip-planner-details > summary::marker{
  content: "";
}
/* KPI cards: align number under title nicely */
.kpi,
.kpi-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Make sure the big number block aligns left */
.kpi .kpi-value,
.kpi-card .kpi-value,
.kpi .value,
.kpi-card .value{
  align-self: flex-start;
}


/* Login modal: 3 buttons (Local / Demo / Continue) wrap nicely */
.login-actions{ flex-wrap:wrap; }
.login-actions .btn{ flex:1 1 140px; }



/* =========================
   TRIP PLANNER UI CLEANUP
========================== */

/* Reduce outer padding around planner block */
.trip-planner{
  margin-top: 6px !important;
}

/* Tighter buttons container */
.trip-planner-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Make details (Trip Planner) not so tall */
.trip-planner-details > summary{
  padding: 8px 12px !important;
}

/* Deck + Ship Guide row */
.trip-planner-buttons a.trip-planner-deck-btn{
  flex: 0 0 auto;
  margin: 0 !important;
}

/* If they wrap on small screens, keep it nice */
@media (min-width: 700px){
  .trip-planner-buttons{
    flex-wrap: nowrap;
  }
}

/* Reduce spacing inside the planner sections */
.trip-planner .planner-sections{
  margin-top: 8px !important;
}

/* Reduce padding inside planner sections */
.trip-planner .planner-section{
  padding: 8px !important;
}

/* Confirmations & Documents */
.trip-planner .planner-docs-upload{
  display: grid;
  grid-template-columns: 1.4fr .8fr 1.2fr auto;
  gap: 8px;
  align-items: center;
  margin: 6px 0 8px;
}

.trip-planner .planner-docs-upload input[type="file"]{
  width: 100%;
}

.trip-planner .planner-docs-empty{
  font-size: .9rem;
  color: var(--muted, #9ca3af);
  padding: 6px 0 8px;
}

.trip-planner .doc-row .planner-actions{
  display:flex;
  gap: 8px;
  align-items:center;
}

@media (max-width: 760px){
  .trip-planner .planner-docs-upload{
    grid-template-columns: 1fr;
  }
  .trip-planner .doc-row .planner-actions{
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}




/* Docs: metadata polish (icon, size, date, badges) */
.trip-planner .doc-title{
  display:flex;
  gap: 8px;
  align-items: center;
}

.trip-planner .doc-icon{
  width: 20px;
  height: 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.trip-planner .doc-meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.trip-planner .doc-meta-line{
  color: var(--muted, #9ca3af);
  font-size: .85rem;
}

.trip-planner .doc-meta .dot{
  opacity: .6;
  padding: 0 6px;
}

/* Label badge */
.trip-planner .doc-badge{
  --badge: var(--accent, #38bdf8);
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: .78rem;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(56,189,248,.10);
  color: var(--text, #e5e7eb);
  line-height: 1.2;
}

/* Badge variants (best-effort) */
.trip-planner .doc-badge--hotel{ --badge: var(--accent, #38bdf8); background: rgba(56,189,248,.10); }
.trip-planner .doc-badge--flight{ --badge: var(--accent-2, #a855f7); background: rgba(168,85,247,.10); }
.trip-planner .doc-badge--excursion{ --badge: var(--success, #22c55e); background: rgba(34,197,94,.10); }
.trip-planner .doc-badge--transfers{ --badge: rgba(148,163,184,1); background: rgba(148,163,184,.10); }
.trip-planner .doc-badge--cruise-confirmation{ --badge: var(--accent, #38bdf8); background: rgba(56,189,248,.10); }
.trip-planner .doc-badge--shareholder-benefit{ --badge: var(--success, #22c55e); background: rgba(34,197,94,.10); }

.trip-planner .doc-badge{
  border-color: color-mix(in srgb, var(--badge) 35%, rgba(148,163,184,.28));
}


/* =========================
   TRIP PLANNER UI CLEANUP v2
========================== */

/* Kill extra padding around the whole planner block */
.trip-planner{
  margin-top: 4px !important;
}

/* Stack buttons vertically */
.trip-planner-buttons{
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* Main Trip Planner button tighter */
.trip-planner-details > summary{
  padding: 6px 12px !important;
}

/* Secondary row (Deck + Ship Guide) */
.trip-planner-secondary{
  display: flex;
  gap: 8px;
  margin-top: 0 !important;
}

/* Buttons tighter */
.trip-planner-buttons a.trip-planner-deck-btn{
  margin: 0 !important;
  padding: 6px 12px !important;
}

/* Reduce spacing inside expanded planner */
.trip-planner .planner-sections{
  margin-top: 6px !important;
}

.trip-planner .planner-section{
  padding: 8px !important;
}


/* =========================
   TRIP PLANNER UI CLEANUP v3
   - Remove outer padding around the Trip Planner button
   - Deck Plan + Ship Guide share one row under Trip Planner
========================== */

/* Remove the "card-like" padding/border on the <details> wrapper (the summary already looks like a button) */
.trip-planner details.trip-planner-details{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Reduce extra space above the buttons */
.trip-planner-buttons{
  margin-top: 6px !important;
  gap: 10px !important;
}

/* Secondary row: Deck + Guide on one line */
.trip-planner-secondary{
  display: flex !important;
  gap: 10px !important;
  width: 100%;
}

/* Make both buttons share the row nicely */
.trip-planner-secondary .trip-planner-deck-btn{
  flex: 1 1 0 !important;
  min-width: 0;
}

/* On small phones, allow wrap if needed */
@media (max-width: 420px){
  .trip-planner-secondary{ flex-wrap: wrap; }
  .trip-planner-secondary .trip-planner-deck-btn{ flex: 1 1 100% !important; }
}



/* =========================
   TRIP PLANNER UI CLEANUP v4
   Make Trip Planner full-width and match secondary row
========================== */

/* Make the main Trip Planner summary button span full width */
.trip-planner-buttons details.trip-planner-details > summary{
  width: 100% !important;
  display: flex;
  justify-content: center;   /* center label */
}

/* Secondary row should fill full width */
.trip-planner-secondary{
  width: 100%;
}

/* Make each secondary button take half width so the row matches the main button */
.trip-planner-secondary .trip-planner-deck-btn{
  flex: 1 1 0;
  text-align: center;
}

/* Keep heights visually consistent */
.trip-planner-buttons a.trip-planner-deck-btn,
.trip-planner-buttons details.trip-planner-details > summary{
  min-height: 44px;
}



/* =========================
   TRIP PLANNER FULL-WIDTH v5
========================== */

/* The buttons column should stretch children full width */
.trip-planner-buttons{
  align-items: stretch !important;
}

/* Ensure the <details> fills the row */
.trip-planner-details{
  width: 100% !important;
  flex: 0 0 auto;
}

/* Make the <summary> behave like a full-width button */
.trip-planner-details > summary{
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Secondary row stays full width; buttons share space */
.trip-planner-secondary{
  width: 100% !important;
  display: flex !important;
  gap: 10px;
}

.trip-planner-secondary .trip-planner-deck-btn{
  flex: 1 1 0;
  width: 100%;
}

/* Tiny screens: allow wrap */
@media (max-width: 420px){
  .trip-planner-secondary{
    flex-wrap: wrap;
  }
  .trip-planner-secondary .trip-planner-deck-btn{
    flex: 1 1 100%;
  }
}

/* =========================
   PORTS STATS VIEW
========================== */
.ports-stats-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 900px){
  .ports-stats-grid{ grid-template-columns: 1fr; }
}
.ports-stat{
  background: var(--kpi-bg, rgba(15,23,42,.90));
  border: 1px solid var(--kpi-border, rgba(148,163,184,.35));
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--kpi-shadow, 0 10px 26px rgba(0,0,0,.40));
}
.ports-stat-label{
  font-size: .72rem;
  color: var(--muted);
}
.ports-stat-value{
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 750;
}
.ports-stat-sub{
  margin-top: 2px;
  font-size: .72rem;
  color: var(--muted);
}

.ports-leaderboard{
  margin-bottom: 14px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
}
.ports-leaderboard-title{
  font-size: .75rem;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ports-leaderboard-list{
  margin: 0;
  padding-left: 18px;
}
.ports-leaderboard-list li{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  font-size: .82rem;
}
.lb-name{ color: var(--text); }
.lb-count{
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.port-stat-row{
  border-radius: 12px;
  border: 1px solid var(--row-border);
  background: var(--row-bg);
  margin-bottom: 8px;
  overflow: hidden;
}
.port-stat-summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.port-stat-summary::-webkit-details-marker{ display:none; }
.port-stat-name{
  font-weight: 700;
  font-size: .9rem;
}
.port-stat-meta{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.port-stat-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  font-size: .82rem;
}
.port-stat-sub{
  font-size: .72rem;
  color: var(--muted);
}
.port-stat-trips{
  padding: 10px 12px 12px;
  border-top: 1px solid var(--surface-border);
  background: rgba(0,0,0,.06);
}
.port-trip-item{
  display:flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(148,163,184,.18);
}
.port-trip-item:last-child{ border-bottom: none; }

.port-trip-main{
  display:flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.port-trip-excursions{
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 12px;
  background: rgba(0,0,0,.04);
}
.port-exc-item{
  display:flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.port-exc-name,
.port-exc-link{
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
}
.port-exc-link:hover{ text-decoration: underline; }
.port-exc-meta{
  font-size: .72rem;
  color: var(--muted);
}
.trip-pill.booked{
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.14);
  color: var(--text);
}
.trip-pill.interested{
  border-color: rgba(56,189,248,.45);
  background: rgba(56,189,248,.12);
  color: var(--text);
}
.trip-pill{
  font-size: .68rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}
.trip-pill.upcoming{
  border-color: rgba(34,197,94,.55);
  color: rgba(34,197,94,.95);
}
.trip-pill.past{
  border-color: rgba(148,163,184,.45);
  color: var(--muted);
}
.trip-line{
  font-size: .8rem;
  color: var(--text);
}


/* =========================
  Latitude progress tracker
========================== */
.lat-tracker{ margin-top:10px; }
.lat-tracker-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.lat-tracker-label{
  font-size:.68rem;
  color: var(--muted);
}
.lat-tracker-meta{
  font-size:.68rem;
  color: var(--muted);
  opacity:.95;
  white-space:nowrap;
}
.lat-track{
  height:10px;
  border-radius:999px;
  border:1px solid var(--kpi-border);
  background: rgba(2,6,23,.35);
  overflow:hidden;
}
body.light .lat-track{ background: rgba(2,6,23,.08); }
.lat-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), #0ea5e9, var(--accent-2));
  box-shadow: 0 0 18px rgba(56,189,248,.35);
  width:0%;
  transition: width .35s ease;
}


/* =========================
   EMPTY STATE: GETTING STARTED LINK
========================== */
.empty-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.empty-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background: var(--surface);
  color: var(--accent);
  text-decoration:none;
  font-size:.74rem;
  font-weight:650;
}
.empty-link:hover{ filter: brightness(1.06); }


/* =========================
   PORTS MAP (Leaflet)
========================== */
.ports-map-wrap{ margin-top: 6px; }
#ports-map{
  position: relative;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: rgba(2,6,23,.35);
}
@media (max-width: 600px){
  #ports-map{ height: 320px; }
}


/* Map legend */

/* Route playback day banner */
.ports-map-day-banner{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -105%);
  z-index:700;
  max-width:calc(100% - 28px);
  padding:7px 12px;
  border-radius:0 0 14px 14px;
  border:1px solid rgba(56,189,248,.32);
  border-top:0;
  background:rgba(15,23,42,.9);
  color:#e5f6ff;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:0 12px 26px rgba(2,6,23,.28);
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease, transform .22s ease;
}
.ports-map-day-banner.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}
body.light .ports-map-day-banner{
  background:rgba(255,255,255,.94);
  color:#0f172a;
  border-color:rgba(14,165,233,.35);
  box-shadow:0 12px 26px rgba(15,23,42,.14);
}
@media (max-width:600px){
  .ports-map-day-banner{
    max-width:calc(100% - 18px);
    font-size:.74rem;
    padding:6px 10px;
  }
}

.ports-map-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: rgba(2,6,23,.25);
}
.ports-map-legend .pml-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: .85rem;
  color: var(--muted);
  white-space: nowrap;
}
.ports-map-legend .pml-swatch{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.ports-map-legend .pml-past{ color:#22c55e; background:#22c55e; }
.ports-map-legend .pml-planned{ color:#38bdf8; background:#38bdf8; }
.ports-map-legend .pml-both{ color:#a855f7; background:#a855f7; }

/* Leaflet theme to match your UI */
.leaflet-container{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--surface-border);
}
.leaflet-popup-content{ margin: 10px 12px; }
.leaflet-control-zoom a{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--surface-border);
}
.leaflet-control-zoom a:hover{ filter: brightness(1.04); }

/* Collapsible Ports Map panel */
.ports-map-panel{
  overflow: hidden;
  max-height: 900px;
  transition: max-height .28s ease, opacity .22s ease;
  opacity: 1;
  will-change: max-height, opacity;
}
.ports-map-panel.is-collapsed{
  max-height: 0;
  opacity: 0;
}


/* Ship dropdown fallback for mobile (iOS datalist issues) */
.ship-select{ width:100%; }



/* =========================
   FINAL PAYMENT ALERTS
========================== */
.alert-list{
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(248,113,113,.35);
  border-radius: var(--radius-lg);
  background: rgba(248,113,113,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
.alert-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.alert-title{ font-weight:700; }
.alert-sub{ color: var(--muted); font-size: .85rem; }

.alert-items{ display:flex; flex-direction:column; gap:8px; }
.alert-item{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.35);
  cursor:pointer;
}
body.light .alert-item{ background: rgba(255,255,255,.65); }

.alert-item:hover{ transform: translateY(-1px); }
.alert-item:active{ transform: translateY(0px); }

.alert-item-main{ display:flex; flex-direction:column; gap:2px; }
.alert-item-name{ font-weight:700; }
.alert-item-meta{ color: var(--muted); font-size:.85rem; }
.alert-item-cta{
  font-size:.8rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.25);
  color: var(--text);
  opacity:.9;
}

.alert-item.info{ border-color: rgba(56,189,248,.35); }
.alert-item.warn{ border-color: rgba(245,158,11,.45); }
.alert-item.urgent{ border-color: rgba(248,113,113,.55); }

.badge.good{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color: var(--text); }
.badge.warn{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); color: var(--text); }


/* =========================
  TRIP MODAL (Add/Edit Trip)
========================== */
.trip-modal{
  width: min(980px, calc(100% - 24px));
  max-height: min(86vh, 920px);
  display:flex;
  flex-direction:column;
}
.trip-modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 8px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.trip-modal-top h3{
  margin:0;
  font-size: 1.05rem;
}
.trip-modal-body{
  padding: 10px 14px 14px;
  overflow:auto;
}
.trip-modal-body .card{
  margin: 0; /* the moved Add Trip card should sit flush */
}

/* ✅ iOS/Safari scrolling fix: allow the body to shrink + scroll inside flex modal */
.trip-modal{ min-height: 0; }
.trip-modal-top{ flex: 0 0 auto; }
.trip-modal-body{ flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; }

/* If the modal ever exceeds the viewport, allow the backdrop to scroll (mobile Safari) */
.modal-backdrop{ overflow: auto; }

@media (max-width: 520px){
  .modal-backdrop{ align-items: flex-start; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .trip-modal{ max-height: 92svh; }
}

/* Keep the form comfortable on smaller screens */
@media (max-width: 520px){
  .trip-modal{
    width: calc(100% - 14px);
    max-height: 92vh;
  }
  .trip-modal-top{
    padding: 12px 12px 8px;
  }
  .trip-modal-body{
    padding: 10px 12px 12px;
  }
}




/* =========================
  TRIP MODAL — Desktop polish
  (Add/Edit Trip popup)
========================== */

/* Make trip modal backdrop feel more “app-like” */
#trip-modal-backdrop{
  padding: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Modal container polish */
.modal.trip-modal{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  border: 1px solid rgba(148,163,184,.28);
}

/* Sticky header so Close is always reachable */
.trip-modal-top{
  position: sticky;
  top: 0;
  z-index: 6;
  background: linear-gradient(180deg, rgba(2,6,23,.98), rgba(2,6,23,.90));
}

/* Scroll only the body (header stays put) */
.trip-modal-body{
  overflow: auto;
}

/* Inside the modal, make the moved card feel like native content */
.trip-modal-body #trip-form-card{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Compact + nicer header inside the form (Edit Trip / helper text) */
.trip-modal-body #trip-form-card .card-header{
  padding: 10px 2px 12px;
  border-bottom: 1px solid rgba(148,163,184,.16);
  margin-bottom: 12px;
}
.trip-modal-body #trip-form-card .card-header h2{
  font-size: 0.95rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  margin: 0;
}
.trip-modal-body #trip-form-card .card-header small{
  display:block;
  margin-top: 6px;
  color: rgba(226,232,240,.75);
}

/* Wider modal on desktop */
@media (min-width: 900px){
  .modal.trip-modal{
    width: min(1120px, calc(100% - 64px));
    max-height: min(92vh, 980px);
  }

  /* 2-column form layout */
  .trip-modal-body .field-row,
  .trip-modal-body .row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    align-items: start;
  }

  /* Ports + notes + footer span full width */
  .trip-modal-body #ports-list,
  .trip-modal-body .ports-list,
  .trip-modal-body #trip-notes,
  .trip-modal-body .form-footer{
    grid-column: 1 / -1;
  }

  /* Ports block gets its own soft panel so it doesn't dominate */
  .trip-modal-body #ports-list,
  .trip-modal-body .ports-list{
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,.20);
    background: rgba(2,6,23,.28);
  }

  /* Make action/footer area stay visible when scrolling */
  .trip-modal-body .form-footer{
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-top: 12px;
    margin-top: 10px;
    background: linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.92) 35%, rgba(2,6,23,.98));
  }

  /* Inputs feel more “desktop app” */
  .trip-modal-body input,
  .trip-modal-body select,
  .trip-modal-body textarea{
    min-height: 42px;
  }
  .trip-modal-body textarea{
    min-height: 96px;
  }
}


/* =========================
   HELP MODAL (Getting Started)
========================== */
#help-modal-backdrop{ display:none; }

.help-modal {
  width: 95%;              /* nearly full width on large screens */
  max-width: 1200px;       /* allow it to grow wider */
  height: 250vh;            /* nearly full height of the screen */
  min-height: 700px;       /* optional: ensure enough height on medium screens */
}

@media (max-width: 768px) {
  .help-modal {
    width: 100%;
    max-width: none;
    height: 95vh;          /* still tall on phones/tablets */
  }
}

/* reuse the same body container as the Trip modal */
.help-modal .trip-modal-body{
  flex: 1 1 auto;
  padding: 0;
}

#help-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* =========================
   HELP MODAL (Getting Started)
========================== */
#help-modal-backdrop{ display:none; }

.help-modal{
  width: 100%;
  max-width: 900px;
  height: 90vh;              /* ✅ fixed height so iframe can fill */
  display: flex;
  flex-direction: column;
}

.help-modal .trip-modal-body{
  flex: 1 1 auto;
  padding: 0;
  display: flex;             /* ✅ let iframe stretch */
}

#help-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* =========================
   HELP / GETTING STARTED MODAL
========================== */
.help-modal{
  width: 95vw;
  max-width: 1200px;   /* big desktop size */
  height: 92vh;
  padding: 0;          /* let iframe fill it */
  display: flex;
  flex-direction: column;
}

/* Modal body should fill remaining space */
.help-modal .trip-modal-body{
  flex: 1;
  padding: 0;
  display: flex;
}

/* Iframe fills modal */
#help-iframe{
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0 0 16px 16px;
}

/* Mobile: go full screen */
@media (max-width: 768px){
  .help-modal{
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}
/* =========================
   HELP MODAL — Mobile fullscreen
========================== */
@media (max-width: 768px){
  /* Backdrop should fill the screen and not "float" */
  #help-modal-backdrop{
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  /* Make the modal true fullscreen */
  .help-modal{
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;      /* better than 100vh on iOS */
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Make header feel app-like */
  .help-modal .trip-modal-top{
    padding: 14px 14px 10px !important;
  }

  /* Ensure iframe can scroll */
  .help-modal .trip-modal-body{
    flex: 1;
    min-height: 0;                 /* important for iOS flex scrolling */
  }

  #help-iframe{
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
  }
}

/* =========================
   HELP MODAL — hard overrides
   (prevents .modal max-height from shrinking the iframe on mobile)
========================== */
.modal.help-modal{
  max-height: none;
  overflow: hidden; /* keep iframe clean; body handles scrolling */
}

@media (max-width: 768px){
  .modal.help-modal{
    max-height: none;
    height: 100dvh; /* iOS-friendly fullscreen */
  }

  /* iOS safe-area padding for the header */
  .modal.help-modal .trip-modal-top{
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
  }
}

/* =========================
   HELP MODAL — hard overrides
   (prevents .modal max-height from shrinking the iframe on mobile)
========================== */
.modal.help-modal{
  max-height: none;
  overflow: hidden; /* keep iframe clean; body handles scrolling */
}

@media (max-width: 768px){
  .modal.help-modal{
    max-height: none;
    height: 100dvh; /* iOS-friendly fullscreen */
  }

  /* iOS safe-area padding for the header */
  .modal.help-modal .trip-modal-top{
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
  }
}

/* =========================
   HELP MODAL — hard overrides
   (prevents .modal max-height from shrinking the iframe on mobile)
========================== */
.modal.help-modal{
  max-height: none;
  overflow: hidden; /* keep iframe clean; body handles scrolling */
}

@media (max-width: 768px){
  .modal.help-modal{
    max-height: none;
    height: 100dvh; /* iOS-friendly fullscreen */
  }

  /* iOS safe-area padding for the header */
  .modal.help-modal .trip-modal-top{
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
  }
}

/* =========================
   HELP MODAL — hard overrides
   (prevents .modal max-height from shrinking the iframe on mobile)
========================== */
.modal.help-modal{
  max-height: none;
  overflow: hidden; /* keep iframe clean; iframe handles scrolling */
}

@media (max-width: 768px){
  .modal.help-modal{
    max-height: none;
    height: 100dvh; /* iOS-friendly fullscreen */
  }

  /* iOS safe-area padding for the header */
  .modal.help-modal .trip-modal-top{
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
  }
}


/* =========================
  SHARE LINK COPY MODAL
========================== */
.copy-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.copy-modal{
  width: min(620px, 92vw);
  background: var(--surface, rgba(17,24,39,.95));
  border: 1px solid var(--surface-border, rgba(148,163,184,.25));
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 14px;
}
.copy-modal h3{ margin: 0 0 10px; font-size: 1.05rem; }
.copy-row{ display:flex; gap:10px; align-items:center; }
.copy-input{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border, rgba(148,163,184,.25));
  background: rgba(255,255,255,.06);
  color: var(--text, #e5e7eb);
}
.copy-actions{
  display:flex; gap:10px; justify-content:flex-end;
  margin-top: 12px;
}
@media (max-width: 520px){
  .copy-row{ flex-direction: column; align-items: stretch; }
  .copy-row .btn{ width: 100%; }
  .copy-actions .btn{ width: 100%; }
}



/* =========================
   SHARE STATUS LINE + CHECKLIST
========================== */
.trip-shareline{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: rgba(56,189,248,.08);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.trip-shareline-text{
  font-size: .85rem;
  color: var(--text);
  font-weight: 650;
}
.trip-shareline-actions{
  display:flex;
  gap: 8px;
}
.btn.btn-small{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .82rem;
}

#trip-checklist-body{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.check-item{
  border-radius: 12px;
  border: 1px solid var(--row-border, var(--surface-border));
  background: var(--row-bg, rgba(255,255,255,.03));
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.check-left{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.check-title{
  font-weight: 750;
  font-size: .92rem;
}
.check-badges{
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge.bad{
  background: rgba(249,115,115,.12);
  border-color: rgba(249,115,115,.35);
  color: var(--text);
}
.badge.warn{
  background: rgba(251,191,36,.14);
  border-color: rgba(251,191,36,.35);
  color: var(--text);
}
.badge.good{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
  color: var(--text);
}
/* Trips header filter pill (Hide past trips) */
.trip-header-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.check-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  line-height:1;
}
.check-pill input{
  width:16px;
  height:16px;
  accent-color: var(--accent);
}
@media (max-width:600px){
  .check-pill{ padding:7px 9px; }
}


/* =========================================================
   Trip Modal – Theme-aware header & footer (LIGHT MODE FIX)
   Prevents overly-dark bars on Add/Edit Trip
========================================================= */
body.light .trip-modal-top{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.96),
    rgba(255,255,255,.88)
  );
  border-bottom-color: rgba(148,163,184,.35);
}

body.light .trip-modal-body .form-footer{
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.82) 35%,
    rgba(255,255,255,.96)
  );
}

/* Ports panel inside modal should also respect light mode */
body.light .trip-modal-body #ports-list,
body.light .trip-modal-body .ports-list{
  background: rgba(255,255,255,.75);
  border-color: rgba(148,163,184,.35);
}


/* =========================
   MOBILE (iPhone) NAV POLISH
========================== */
@media (max-width: 640px){
  /* Slim header */
  .title small{ display:none !important; }               /* hide tagline */
  .chip #privacy-chip-text{ display:none !important; }   /* hide status text, keep dot */
  .chip{ padding: 8px 10px !important; gap: 8px !important; }
  .logo-img{ width: 44px !important; height: 44px !important; border-radius: 14px !important; }
  .title h1{ font-size: 1.05rem !important; }

  /* Hide desktop action row (moved to More sheet) */
  .action-stack{ display:none !important; }

  /* Move main tabs to bottom tab bar on mobile */
  .tabs{ display:none !important; }

  /* Give the main content room above the bottom bar */
  main{ padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
}

/* Bottom tab bar (mobile only) */
.mobile-tabbar{
  display:none;
}
@media (max-width: 640px){
  .mobile-tabbar{
    display:grid;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    grid-template-columns: repeat(6, 1fr);
    background: rgba(2,6,23,.92);
    border-top: 1px solid var(--surface-border);
    backdrop-filter: blur(14px);
    z-index: 1000;
  }
  .mobile-tabbar .m-tab{
    appearance:none;
    border:0;
    background:transparent;
    color: var(--muted);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 4px;
    padding: 8px 4px;
    min-height: 64px;
  }
  .mobile-tabbar .m-ico{ font-size: 1.1rem; line-height: 1; }
  .mobile-tabbar .m-lbl{ font-size: .68rem; letter-spacing: .01em; }
  .mobile-tabbar .m-tab.active{ color: var(--accent); }

  /* Pulse the Alerts tab icon when there are checklist issues */
  .mobile-tabbar .m-tab[data-tab="checklist"].has-alerts .m-ico{
    animation: alertsPulse 1.6s ease-in-out infinite;
  }
}

@keyframes alertsPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
  100%{ transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .mobile-tabbar .m-tab[data-tab="checklist"].has-alerts .m-ico{
    animation: none;
  }
}

/* More sheet (mobile only) */
.mobile-more-backdrop{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1200;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}
.mobile-more-sheet{
  width: min(560px, 100%);
  /* Use theme tokens so the sheet matches dark/light mode */
  background: var(--surface-2);
  border: 1px solid var(--surface-border);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  overflow:hidden;
}
.mobile-more-hdr{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid var(--surface-border);
  background: var(--surface-2);
}
.mobile-more-title{
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}
.mobile-more-close{
  padding: 10px 12px !important;
  min-width: 44px;
}
.mobile-more-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}
@media (max-width: 380px){
  .mobile-more-grid{ grid-template-columns: 1fr; }
}
.mobile-more-foot{
  padding: 0 12px 12px;
}



/* ===============================
   Mobile header cleanup + User tab move
   =============================== */
@media (max-width: 768px) {
  .status-dot,
  .online-indicator,
  .header-status-dot,
  .header-spacer,
  .status-bar,
  .header-divider {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #change-user-btn,
  .header-user,
  .user-btn,
  .top-user-button {
    display: none !important;
  }

  header,
  .app-header {
    padding-bottom: 8px !important;
  }
}

/* ===============================
   Mobile header cleanup v3
   =============================== */
@media (max-width: 768px){

  /* Hide light/dark toggle on mobile */
  .theme-toggle,
  .theme-btn,
  .light-toggle,
  .dark-toggle {
    display:none !important;
  }

  /* Kill green dot + spacer bar */
  .status-dot,
  .online-indicator,
  .header-status-dot,
  .header-spacer,
  .status-bar {
    display:none !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  header,
  .app-header {
    padding-bottom:6px !important;
  }
}

/* Desktop ports-of-call spacing fix */
@media (min-width: 768px) {
  .port-pill {
    padding: 12px 16px;
    gap: 12px;
  }

  .port-pill .port-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* space between buttons */
    margin-left: auto;
  }

  .port-pill button,
  .port-pill .icon-btn {
    margin-left: 6px;
  }

  .port-pill label {
    margin-right: 10px;
  }
}

/* ===============================
   Mobile header + tabbar fixes v4
   =============================== */
@media (max-width: 768px){
  /* Hide signed-in autosave chip + dot */
  .chip, .chip-dot, #privacy-chip, #privacy-chip-text {
    display:none !important;
  }

  /* Hide theme toggle pill in header on mobile */
  #theme-toggle { display:none !important; }

  /* Tighten header spacing after removing chips */
  .header-actions { gap: 0 !important; }
}


/* Flight status preview (FlightAware AeroAPI) */
.flight-status-pill{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:650;
  border:1px solid var(--surface-border);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.flight-status-pill[data-status-key="delayed"],
.flight-status-pill[data-status-key="cancelled"],
.flight-status-pill[data-status-key="diverted"],
.flight-status-pill[data-status-key="arrived"],
.flight-status-pill[data-status-key="enroute"],
.flight-status-pill[data-status-key="on_time"]{
  /* keep default; icons convey status */
}


/* =========================
  PORTS MAP: popup + highlight
========================== */
.port-map-popup .pmp-title{ font-size: 0.95rem; margin-bottom: 2px; }
.port-map-popup .pmp-meta{ color: var(--muted); font-size: 0.82rem; margin-bottom: 6px; }
.port-map-popup .pmp-timeline{ color: var(--muted); font-size: 0.78rem; line-height: 1.35; margin-bottom: 8px; }
.port-map-popup .pmp-mini-title{ color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.port-map-popup .pmp-ships{ margin-bottom: 10px; }
.port-map-popup .pmp-ship-list{ display:flex; flex-wrap:wrap; gap:6px; }
.port-map-popup .pmp-ship-chip{ display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; border:1px solid var(--surface-border); background:var(--surface); color:var(--text); font-size:0.76rem; }
.btn.btn-sm{ padding: 8px 10px; border-radius: 10px; font-size: 0.9rem; }

.port-stat-row.pulse-highlight{
  outline: 2px solid rgba(56,189,248,.55);
  box-shadow: 0 0 0 6px rgba(56,189,248,.10);
  transition: box-shadow .25s ease, outline-color .25s ease;
}


/* === AGENDA_DROPDOWN_CSS_V2 === */
.planner-add select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  outline: none;
}
.planner-add select:focus{
  box-shadow: 0 0 0 3px rgba(56,189,248,.18);
}


/* =========================
   Trip buffers (Pre/Post)
========================== */
.trip-buffer-row input[type="number"]{
  width:100%;
}
.trip-buffer-row .help-text.hint{
  margin-top:2px;
  font-size:.7rem;
  opacity:.9;
}

@media (max-width:600px){
  .trip-buffer-row{ gap:10px; }
  .trip-buffer-row .field{ flex:1 1 140px; }
  .trip-buffer-row input[type="number"]{ height:42px; border-radius:12px; }
}



/* =========================
   DOC VIEWER MODAL
========================== */
.doc-viewer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:14px;
}
.doc-viewer-overlay.show{ display:flex; }

.doc-viewer-modal{
  width:min(1100px, 96vw);
  height:min(760px, 88vh);
  background:var(--card-bg, #111827);
  border:1px solid var(--shell-border, rgba(148,163,184,.25));
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.doc-viewer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--shell-border, rgba(148,163,184,.25));
}
.doc-viewer-title{
  font-weight:700;
  font-size:14px;
  color:var(--text, #e5e7eb);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.doc-viewer-body{
  flex:1;
  background:rgba(0,0,0,.10);
}
.doc-viewer-frame{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
}


/* =========================
   DOC VIEWER MODAL
========================== */
.doc-viewer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:14px;
}
.doc-viewer-overlay.show{ display:flex; }

.doc-viewer-modal{
  width:min(1100px, 96vw);
  height:min(760px, 88vh);
  background:var(--card-bg, #111827);
  border:1px solid var(--shell-border, rgba(148,163,184,.25));
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.doc-viewer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--shell-border, rgba(148,163,184,.25));
}
.doc-viewer-title{
  font-weight:700;
  font-size:14px;
  color:var(--text, #e5e7eb);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.doc-viewer-body{
  flex:1;
  background:rgba(0,0,0,.10);
}
.doc-viewer-frame{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
}


/* =========================
  TODAY ON YOUR TRIP (Dashboard)
========================== */

/* Dashboard KPI card polish */
#kpi-countdown{ font-size:1.1em; line-height:1.05; }
#kpi-perks{ gap:10px; flex-wrap:wrap; }
#kpi-latitude-status{ font-size:1.8rem; }
.lat-tracker{ margin-top:8px; }
.today-card{ border-left:4px solid var(--accent); }
.today-body{ display:flex; flex-direction:column; gap:10px; }
.today-line{ font-size:14px; }
.today-ship{ font-weight:700; }
.today-port{ font-weight:600; }
.today-agenda{ display:flex; flex-direction:column; gap:8px; }
.today-item{ padding:10px 12px; border:1px solid rgba(148,163,184,.20); border-radius:12px; background: rgba(2,6,23,.25); }
.today-item .t-time{ font-weight:700; margin-right:6px; }
.today-item .t-activity{ font-weight:600; }
.today-item .t-notes{ margin-top:6px; opacity:.9; }
.today-empty{ opacity:.75; font-size:13px; padding:8px 0; }


.command-center-card{
  position:relative;
  overflow:hidden;
  margin-top:28px;
  padding:20px;
  border-radius:22px;
  border:1px solid var(--card-border);
  background:var(--card-bg);
  box-shadow:var(--card-shadow);
}
.command-center-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.command-center-header{
  align-items:flex-start;
  gap:12px;
}
.command-center-title-wrap h2{
  margin:0;
  font-size:clamp(1.25rem, 2.4vw, 1.9rem);
  line-height:1.08;
}
.command-center-kicker{
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.command-center-card .card-header small{
  display:block;
  margin-top:6px;
}
.command-center-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(148,163,184,.22);
  white-space:nowrap;
  background:rgba(148,163,184,.14);
}
.command-center-badge.upcoming{
  color:#60a5fa;
  background:rgba(96,165,250,.14);
}
.command-center-badge.active{
  color:#22c55e;
  background:rgba(34,197,94,.14);
}
.command-center-badge.past{
  color:var(--muted);
  background:rgba(148,163,184,.14);
}
.command-center-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.cc-meta-item{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.04);
  min-width:0;
}
.cc-meta-label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.cc-meta-item strong{
  display:block;
  font-size:17px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
}
.command-center-details{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.command-center-line{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.18);
  font-size:14px;
}
.command-center-line strong{
  font-weight:800;
}
.command-center-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.command-center-smart{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.command-center-smart:empty{
  display:none;
}
.command-center-health{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:100%;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.command-center-health.ready{
  color:#22c55e;
  background:rgba(34,197,94,.12);
}
.command-center-health.planning{
  color:#f59e0b;
  background:rgba(245,158,11,.12);
}
.command-center-health.action{
  color:#f97316;
  background:rgba(249,115,22,.12);
}
.command-center-insight-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.command-center-panel{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(2,6,23,.18);
}
.command-center-panel h3{
  margin:0 0 8px;
  font-size:12px;
  line-height:1.1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.command-center-alert-list,
.command-center-today-list{
  display:grid;
  gap:8px;
}
.command-center-alert,
.command-center-today-item{
  font-size:14px;
  line-height:1.35;
}
.command-center-alert.urgent{
  color:#fb923c;
  font-weight:700;
}
.command-center-next-step{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(56,189,248,.22);
  background:rgba(56,189,248,.10);
  font-size:14px;
}
.command-center-next-step strong{
  font-weight:800;
}
.command-center-next-step .muted{
  color:var(--muted);
  font-size:13px;
}
.command-center-today-time{
  font-weight:800;
}
.command-center-empty{
  font-size:14px;
  color:var(--muted);
}
@media (max-width: 640px){
  .command-center-insight-grid{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .command-center-meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .command-center-header{ flex-direction:column; }
  .command-center-meta{ grid-template-columns:1fr; }
  .command-center-actions .btn{ width:100%; }
}

/* =========================
   ROUTE PILL (Ports Map)
========================== */
.route-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  margin-left:10px;
  flex-wrap:wrap;
}
.route-pill-label{ font-size:13px; font-weight:600; }
.route-pill-meta{ font-size:12px; color: rgba(31,41,55,.75); }
.route-pill-btn{ padding:6px 10px; border-radius:999px; min-width:64px; text-align:center; }
.route-btn.is-active{ opacity:0.65; }
.route-btn.is-active::after{ content:""; }
.route-btn.is-active{ pointer-events:auto; }
.route-btn.is-active{ }


.route-timeline-card{
  margin-top:12px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:18px;
  padding:12px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(248,250,252,.92));
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.route-timeline-title{
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.route-timeline-line{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  line-height:1.4;
}
.route-stop{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.9);
  border:1px solid rgba(148,163,184,.24);
  font-size:.9rem;
  font-weight:600;
  white-space:nowrap;
}
.route-stop-sea{
  background: rgba(224,242,254,.9);
}
.route-stop-label{ font-weight:700; }
.route-arrow{
  color: var(--muted);
  font-weight:700;
}

/* Timeline modal route chips should follow site theme */
.timeline-modal .route-timeline-card{
  background: var(--surface-2, rgba(15,23,42,.92));
  border-color: var(--card-border, rgba(148,163,184,.22));
  box-shadow: var(--card-shadow, 0 10px 26px rgba(0,0,0,.18));
}
.timeline-modal .route-stop{
  background: var(--chip-bg, rgba(15,23,42,.8));
  border-color: var(--border, rgba(148,163,184,.22));
  color: var(--text, #e5e7eb);
}
.timeline-modal .route-stop-sea{
  background: color-mix(in srgb, var(--accent, #38bdf8) 14%, var(--chip-bg, rgba(15,23,42,.8)));
}
body.light .timeline-modal .route-timeline-card{
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
body.light .timeline-modal .route-stop{
  background: rgba(255,255,255,.92);
  color: var(--text, #020617);
}
body.light .timeline-modal .route-stop-sea{
  background: rgba(224,242,254,.92);
}

.port-journal-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.port-journal-card{
  border:1px solid rgba(148,163,184,.18);
  border-radius:14px;
  padding:12px 12px 10px;
  background: rgba(255,255,255,.55);
}
.port-journal-title{
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--muted);
  font-weight:800;
  margin-bottom:8px;
}
.port-journal-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  font-size:.9rem;
}
.port-journal-empty{
  color: var(--muted);
}
@media (max-width: 820px){
  .port-journal-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .route-timeline-card{ padding:10px 12px; }
  .route-timeline-title{ font-size:.9rem; }
  .route-stop{ font-size:.84rem; padding:5px 9px; }
}

.route-ship-icon, .route-end-icon{
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 18px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  user-select: none;
}


/* =========================
   STATUS + SHIPS LAYOUT
========================= */
.status-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .95fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.status-left{ min-width:0; }
.status-right{ min-width:0; }
.ports-stats-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
  align-items: stretch;
  grid-auto-flow: row dense;
}
.ships-panel{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--kpi-shadow, 0 10px 26px rgba(0,0,0,.40));
  position: sticky;
  top: 10px;
}
.ships-panel-title{
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ships-panel-count{
  margin-top: 4px;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
}
.ships-panel-sub{
  margin-top: 2px;
  font-size: .76rem;
  color: var(--muted);
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-border);
}
.ships-panel-mini-title{
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.ships-panel-most-value{
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
}
.ships-panel-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 420px;
  overflow: auto;
}
.ships-panel-list li{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: .86rem;
}
.ship-rank{
  min-width: 1.8rem;
  color: var(--muted);
}
.ship-name{
  color: var(--text);
  min-width: 0;
}
.ship-count{
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.port-stat-head{
  min-width: 0;
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.port-stat-summary{
  align-items: flex-start;
}
.port-stat-meta{
  align-items: flex-end;
  flex: 0 0 auto;
  display:none;
}
.port-stat-sub-main{
  font-size: .8rem;
}
.port-stat-timeline{
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.35;
}
@media (max-width: 980px){
  .status-layout{
    grid-template-columns: 1fr;
  }
  .ships-panel{
    position: static;
  }
}
@media (max-width: 720px){
  .ports-stats-grid{
    grid-template-columns: 1fr;
  }
  .port-stat-summary{
    flex-direction: column;
    align-items: flex-start;
  }
  .port-stat-meta{
    align-items: flex-start;
  }
}


/* Ports polish */
.ports-stat-achievements-card .ports-achievements-list{
  display:grid;
  gap:6px;
  margin-top:8px;
  color:var(--text);
  font-size:.84rem;
  line-height:1.35;
}
.ships-panel-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.ship-item-main{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:baseline;
}
.ship-count-text{
  color:var(--muted);
  font-size:.82rem;
}
.port-stat-achievements{
  font-size:.76rem;
  color:var(--text);
  opacity:.92;
  margin-top:4px;
}
.port-stat-row + .port-stat-row{
  margin-top:10px;
}
.port-stat-summary{
  box-shadow: inset 0 -1px 0 rgba(148,163,184,.12);
}


.ports-stat-achievements-card{
  grid-column: 1;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  height:100%;
}
.ports-stat-top5-card{
  grid-column: 2 / span 2;
  grid-row: 2;
  display:flex;
  flex-direction:column;
  height:100%;
}
.ports-top5-list{
  list-style:none;
  margin:8px 0 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
.ports-top5-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(46px,.7fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
}
.ports-top5-rank{
  font-size:.9rem;
  line-height:1;
}
.ports-top5-name{
  min-width:0;
  font-size:.82rem;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ports-top5-bar{
  height:7px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  overflow:hidden;
}
.ports-top5-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.ports-top5-count{
  font-size:.8rem;
  font-weight:800;
  color:var(--muted);
}
@media (max-width: 720px){
  .ports-stat-achievements-card,
  .ports-stat-top5-card{
    grid-column: span 1;
    grid-row: auto;
    height: auto;
  }
}


/* =========================
   STATUS POLISH UPGRADES
========================= */
.status-layout{
  gap:18px;
  margin-bottom:22px;
}
.ports-stats-grid{
  gap:14px;
  margin-bottom:18px;
}
.ports-stat{
  border-radius:16px;
  padding:14px;
}
.ports-stat-label{
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:none;
}
.ports-stat-kpi{
  min-height:138px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:4px;
}
.ports-stat-icon{
  font-size:1rem;
  opacity:.9;
}
.ports-stat-kpi-value{
  margin-top:2px;
  font-size:2rem;
  line-height:1;
  font-weight:800;
  letter-spacing:-.02em;
}
.ports-stat-kpi-text{
  margin-top:2px;
  font-size:1.55rem;
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.ports-stat-kpi-label{
  font-size:.86rem;
  color:var(--text);
  font-weight:700;
}
.ports-stat-sub{
  margin-top:auto;
  font-size:.76rem;
  color:var(--muted);
}
.ports-stat-achievements-card,
.ports-stat-top5-card{
  min-height:150px;
}
.ports-stat-achievements-card .ports-achievements-list{
  margin-top:10px;
  gap:8px;
  font-size:.95rem;
}
.ports-top5-list{
  margin-top:10px;
  gap:8px;
}
.ports-top5-name{
  font-size:.9rem;
}
.ports-top5-bar{
  height:8px;
  border-radius:999px;
}
.ports-top5-count{
  font-size:.88rem;
}
.ships-panel{
  border-radius:18px;
  padding:16px;
}
.ships-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.ships-panel-title{
  font-size:.82rem;
  letter-spacing:.12em;
}
.ships-panel-badge{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  padding:4px 8px;
  border:1px solid var(--surface-border);
  border-radius:999px;
  background:rgba(148,163,184,.08);
}
.ships-panel-kpi{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:12px 0 2px;
}
.ships-panel-kpi-icon{
  font-size:1.25rem;
  line-height:1;
}
.ships-panel-count{
  margin-top:0;
  font-size:2.15rem;
  font-weight:800;
  line-height:1;
}
.ships-panel-sub{
  margin-top:4px;
  font-size:.8rem;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:16px;
  padding-top:14px;
}
.ships-panel-mini-title{
  font-size:.74rem;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.ships-panel-most-value{
  font-size:.96rem;
  line-height:1.45;
}
.ships-years-list{
  display:grid;
  gap:8px;
}
.ships-year-item{
  display:grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}
.ships-year-label{
  font-size:.84rem;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ships-year-bar{
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  overflow:hidden;
}
.ships-year-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--success), var(--accent));
}
.ships-year-count{
  font-size:.82rem;
  font-weight:700;
  color:var(--muted);
}
.ships-panel-empty{
  font-size:.84rem;
  color:var(--muted);
}
@media (max-width: 980px){
  .ships-panel{
    position:static;
  }
}
@media (max-width: 720px){
  .ports-stat-kpi{
    min-height:auto;
  }
  .ports-stat-kpi-text{
    font-size:1.35rem;
  }
  .ships-panel-header{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* =========================
   STATUS PREMIUM REFRESH
========================= */
.status-layout{
  grid-template-columns: minmax(0, 1.78fr) minmax(320px, 1fr);
  gap:20px;
  align-items:start;
}
.status-left,
.status-right{
  min-width:0;
}
.ports-stats-grid{
  gap:16px;
  margin-bottom:20px;
}
.ports-stat{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:16px 16px 15px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 34%),
    radial-gradient(circle at bottom left, rgba(168,85,247,.08), transparent 38%),
    var(--kpi-bg, rgba(15,23,42,.90));
  border:1px solid rgba(148,163,184,.22);
  box-shadow:0 12px 30px rgba(15,23,42,.10);
}
body.light .ports-stat{
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(168,85,247,.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.95));
  border:1px solid rgba(148,163,184,.32);
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.ports-stat::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, rgba(56,189,248,.9), rgba(168,85,247,.85));
  opacity:.85;
}
.ports-stat-kpi{
  min-height:154px;
  gap:8px;
}
.ports-stat-icon{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:1.05rem;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
body.light .ports-stat-icon{
  background:rgba(255,255,255,.8);
}
.ports-stat-kpi-value{
  font-size:2.35rem;
  font-weight:850;
  letter-spacing:-.03em;
}
.ports-stat-kpi-text{
  font-size:1.95rem;
  line-height:1;
  letter-spacing:-.035em;
  max-width:12ch;
}
.ports-stat-kpi-label{
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.01em;
}
.ports-stat-sub{
  margin-top:auto;
  font-size:.84rem;
  color:var(--muted);
  line-height:1.35;
}
.ports-stat-achievements-card,
.ports-stat-top5-card{
  min-height:166px;
}
.ports-stat-label{
  font-size:.84rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--muted);
}
.ports-achievements-list{
  margin-top:12px;
  gap:10px;
}
.ports-achievements-list div{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1rem;
  font-weight:700;
}
.ports-top5-list{
  margin-top:12px;
  gap:10px;
}
.ports-top5-item{
  grid-template-columns:auto minmax(0, 1.4fr) minmax(88px, .9fr) auto;
  gap:10px;
}
.ports-top5-rank{
  width:24px;
  text-align:center;
  font-weight:800;
}
.ports-top5-name{
  font-size:1rem;
  font-weight:750;
}
.ports-top5-bar{
  height:10px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
}
.ports-top5-bar-fill{
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(168,85,247,.92));
  box-shadow:0 2px 8px rgba(99,102,241,.18);
}
.ports-top5-count{
  font-size:.92rem;
  font-weight:800;
  color:var(--text);
}
.ships-panel{
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
  border:1px solid rgba(148,163,184,.34);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
}
body:not(.light) .ships-panel{
  background:
    radial-gradient(circle at top right, rgba(56,189,248,.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(34,197,94,.10), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.96));
}
.ships-panel-header{
  margin-bottom:14px;
}
.ships-panel-title{
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.16em;
}
.ships-panel-badge{
  background:rgba(255,255,255,.7);
  border-color:rgba(148,163,184,.34);
  font-size:.66rem;
  font-weight:700;
}
body:not(.light) .ships-panel-badge{
  background:rgba(148,163,184,.10);
}
.ships-panel-kpi{
  gap:14px;
  padding:14px 14px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(148,163,184,.22);
}
body:not(.light) .ships-panel-kpi{
  background:rgba(255,255,255,.03);
}
.ships-panel-kpi-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.25rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.28);
}
body:not(.light) .ships-panel-kpi-icon{
  background:rgba(255,255,255,.08);
}
.ships-panel-count{
  font-size:2.45rem;
  letter-spacing:-.03em;
}
.ships-panel-sub{
  font-size:.9rem;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:14px;
  padding:14px 14px 0;
  border-top:1px solid rgba(148,163,184,.24);
}
.ships-panel-mini-title{
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.ships-panel-most-value{
  font-size:1.06rem;
  font-weight:750;
}
.ships-years-list,
.ships-panel-list{
  margin-top:10px;
}
.ships-year-bar{
  height:10px;
}
.ships-panel-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:2px 0;
}
.ship-rank{
  width:26px;
  flex:0 0 26px;
  text-align:center;
  font-weight:800;
}
.ship-item-main{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.ship-name{
  font-weight:700;
}
.ship-count-text{
  color:var(--muted);
}
@media (max-width: 1200px){
  .status-layout{
    grid-template-columns:minmax(0, 1.5fr) minmax(300px, 1fr);
  }
  .ports-stat-kpi-text{
    font-size:1.72rem;
  }
}
@media (max-width: 980px){
  .status-layout{
    grid-template-columns:1fr;
  }
  .ships-panel{
    position:static;
  }
}
@media (max-width: 720px){
  .ports-stats-grid{
    grid-template-columns:1fr;
  }
  .ports-stat-kpi,
  .ports-stat-achievements-card,
  .ports-stat-top5-card{
    min-height:auto;
  }
  .ports-stat-kpi-text{
    font-size:1.45rem;
    max-width:none;
  }
  .ports-top5-item{
    grid-template-columns:auto minmax(0,1fr) 84px auto;
  }
}


/* =========================
   STATUS DASHBOARD TIGHTER LAYOUT
========================= */
.status-dashboard{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.status-row{
  display:grid;
  gap:12px;
  align-items:start;
}
.status-row-kpis{
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.status-row-insights{
  grid-template-columns:minmax(210px,.8fr) minmax(320px,1.6fr);
}
.status-row-years,
.status-row-ships{
  grid-template-columns:1fr;
}
.status-row-ships{
  margin-bottom:14px;
}
.ports-stats-grid,
.status-layout,
.status-left,
.status-right{
  all:unset;
}
.ports-stat{
  padding:12px 13px 11px;
  border-radius:16px;
}
.ports-stat-kpi{
  min-height:112px;
}
.ports-stat-icon{
  width:26px;
  height:26px;
  border-radius:9px;
  font-size:.82rem;
}
.ports-stat-value{
  margin-top:6px;
}
.ports-stat-kpi-value{
  font-size:1.75rem;
  line-height:1.02;
}
.ports-stat-kpi-text{
  font-size:1.1rem;
  max-width:13ch;
  line-height:1.02;
}
.ports-stat-kpi-label{
  margin-top:4px;
  font-size:.72rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ports-stat-sub{
  margin-top:6px;
  font-size:.69rem;
  line-height:1.22;
}
.ports-stat-label{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ports-achievements-list{
  margin-top:8px;
  gap:5px;
}
.ports-achievements-list div{
  font-size:.76rem;
  gap:5px;
}
.ports-stat-achievements-card,
.ports-stat-top5-card{
  min-height:132px;
}
.years-card{
  min-height:auto;
}
.years-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.years-card-badge{
  font-size:.56rem;
  padding:3px 9px;
}
.ports-top5-list{
  margin-top:7px;
  gap:6px;
}
.ports-top5-item{
  grid-template-columns:auto minmax(0, 1.55fr) minmax(108px, .9fr) auto;
  gap:7px;
}
.ports-top5-rank,
.ports-top5-name,
.ports-top5-count{
  font-size:.76rem;
}
.ports-top5-bar{
  height:7px;
}
.ships-panel{
  padding:13px;
  border-radius:20px;
}
.ships-panel-header{
  margin-bottom:8px;
}
.ships-panel-title{
  font-size:.72rem;
}
.ships-panel-badge{
  font-size:.56rem;
  padding:3px 9px;
}
.ships-panel-kpi{
  padding:10px 11px 8px;
}
.ships-panel-kpi-icon{
  width:30px;
  height:30px;
  font-size:.92rem;
}
.ships-panel-count{
  font-size:1.75rem;
  line-height:1.02;
}
.ships-panel-sub,
.ships-panel-most-value,
.ship-name,
.ship-count-text,
.ships-year-label,
.ships-year-count{
  font-size:.76rem;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:10px;
  padding:10px 11px 0;
}
.ships-panel-mini-title{
  font-size:.66rem;
  letter-spacing:.14em;
}
.ships-years-list,
.ships-panel-list{
  margin-top:7px;
}
.ships-year-item{
  gap:7px;
}
.ships-year-bar{
  height:7px;
  background:rgba(148,163,184,.18);
}
.ships-year-bar-fill{
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(168,85,247,.92));
}
.ships-panel-list li{
  padding:1px 0;
}
.ship-rank{
  width:20px;
  flex-basis:20px;
  font-size:.74rem;
}
@media (max-width: 980px){
  .status-row-kpis,
  .status-row-insights{
    grid-template-columns:1fr;
  }
}
@media (max-width: 720px){
  .ports-stat-kpi,
  .ports-stat-achievements-card,
  .ports-stat-top5-card{
    min-height:auto;
  }
  .ports-top5-item{
    grid-template-columns:auto minmax(0,1fr) 90px auto;
  }
}


/* === Compact Status Dashboard overrides === */
.status-layout{gap:14px !important; margin-bottom:16px !important;}
.ports-stats-grid{gap:12px !important; margin-bottom:14px !important;}
.ports-stat{padding:12px 12px 11px !important; border-radius:16px !important;}
.ports-stat-kpi{min-height:118px !important; gap:4px !important;}
.ports-stat-icon{width:30px !important; height:30px !important; font-size:.92rem !important; border-radius:10px !important;}
.ports-stat-kpi-value{font-size:2rem !important;}
.ports-stat-kpi-text{font-size:1.45rem !important; line-height:1.02 !important; max-width:14ch !important;}
.ports-stat-kpi-label{font-size:.8rem !important; letter-spacing:.03em !important;}
.ports-stat-sub{font-size:.72rem !important; line-height:1.25 !important;}
.ports-stat-label,.ships-panel-title,.ships-panel-mini-title{font-size:.72rem !important; letter-spacing:.12em !important;}
.ports-stat-achievements-card,.ports-stat-top5-card{min-height:132px !important;}
.ports-achievements-list,.ports-stat-achievements-card .ports-achievements-list{margin-top:8px !important; gap:6px !important;}
.ports-achievements-list div,.ports-stat-achievements-card .ports-achievements-list div{font-size:.82rem !important; gap:6px !important;}
.ports-top5-list{margin-top:8px !important; gap:6px !important;}
.ports-top5-item{gap:8px !important; grid-template-columns:auto minmax(0,1.2fr) minmax(76px,.85fr) auto !important;}
.ports-top5-rank{font-size:.82rem !important; width:20px !important;}
.ports-top5-name{font-size:.82rem !important;}
.ports-top5-bar{height:8px !important;}
.ports-top5-count{font-size:.76rem !important;}
.ships-panel{padding:14px !important; border-radius:18px !important;}
.ships-panel-header{margin-bottom:10px !important;}
.ships-panel-badge{font-size:.58rem !important; padding:3px 7px !important;}
.ships-panel-kpi{padding:10px 12px !important; gap:10px !important; border-radius:14px !important;}
.ships-panel-kpi-icon{width:34px !important; height:34px !important; font-size:1rem !important; border-radius:12px !important;}
.ships-panel-count{font-size:2rem !important;}
.ships-panel-sub{font-size:.78rem !important; line-height:1.25 !important;}
.ships-panel-most,.ships-panel-list-wrap{margin-top:10px !important; padding:10px 10px 0 !important;}
.ships-panel-most-value{font-size:.92rem !important; line-height:1.35 !important;}
.ships-panel-list,.ships-years-list{margin-top:8px !important; gap:6px !important;}
.ships-panel-list li{font-size:.8rem !important; padding:1px 0 !important;}
.ship-rank{width:22px !important; flex-basis:22px !important;}
.ship-name{font-size:.8rem !important;}
.ship-count-text,.ship-count,.ships-year-count,.ships-year-label{font-size:.74rem !important;}
.ships-year-item{gap:8px !important; grid-template-columns:42px minmax(0,1fr) auto !important;}
.ships-year-bar{height:8px !important;}
@media (max-width: 720px){
  .status-layout{gap:10px !important; margin-bottom:12px !important;}
  .ports-stats-grid{gap:10px !important; margin-bottom:10px !important;}
  .ports-stat{padding:10px 10px 9px !important; border-radius:14px !important;}
  .ports-stat-kpi{min-height:auto !important; gap:3px !important;}
  .ports-stat-icon{width:28px !important; height:28px !important; font-size:.85rem !important;}
  .ports-stat-kpi-value{font-size:1.7rem !important;}
  .ports-stat-kpi-text{font-size:1.15rem !important; line-height:1.02 !important; max-width:none !important;}
  .ports-stat-kpi-label{font-size:.72rem !important;}
  .ports-stat-sub{font-size:.65rem !important;}
  .ports-achievements-list div,.ports-stat-achievements-card .ports-achievements-list div{font-size:.74rem !important;}
  .ports-top5-name{font-size:.74rem !important;}
  .ports-top5-item{grid-template-columns:auto minmax(0,1fr) minmax(56px,.7fr) auto !important; gap:6px !important;}
  .ports-top5-bar{height:6px !important;}
  .ships-panel{padding:10px !important; border-radius:16px !important;}
  .ships-panel-kpi{padding:8px 10px !important; gap:8px !important;}
  .ships-panel-kpi-icon{width:30px !important; height:30px !important; font-size:.9rem !important;}
  .ships-panel-count{font-size:1.75rem !important;}
  .ships-panel-sub{font-size:.7rem !important;}
  .ships-panel-mini-title,.ships-panel-title,.ports-stat-label{font-size:.64rem !important; letter-spacing:.1em !important;}
  .ships-panel-most-value{font-size:.82rem !important;}
  .ships-panel-list li{font-size:.72rem !important; gap:6px !important;}
  .ship-name{font-size:.72rem !important;}
  .ship-count-text,.ship-count,.ships-year-count,.ships-year-label{font-size:.66rem !important;}
  .ships-year-bar{height:6px !important;}
}


.map-reset-btn{
  background: rgba(255,255,255,.96);
  color: #0f172a;
  border: 1px solid rgba(15,23,42,.18);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(15,23,42,.18);
}
.map-reset-btn:hover{
  transform: translateY(-1px);
}


/* =========================
   STATUS V2 — SUPER COMPACT ANALYTICS LAYOUT
========================= */
.status-dashboard{
  gap:10px !important;
}
.status-row{
  gap:10px !important;
}
.status-row-kpis{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
}
.status-row-insights{
  grid-template-columns:minmax(170px,.72fr) minmax(0,1.55fr) !important;
}
.ports-stat{
  padding:10px 11px 9px !important;
  border-radius:15px !important;
}
.ports-stat-kpi{
  min-height:92px !important;
  gap:2px !important;
}
.ports-stat-icon{
  width:24px !important;
  height:24px !important;
  border-radius:8px !important;
  font-size:.74rem !important;
}
.ports-stat-value{
  margin-top:4px !important;
}
.ports-stat-kpi-value{
  font-size:1.8rem !important;
  line-height:1 !important;
}
.ports-stat-kpi-text{
  font-size:1.2rem !important;
  line-height:1.02 !important;
  max-width:15ch !important;
}
.ports-stat-kpi-label{
  margin-top:3px !important;
  font-size:.7rem !important;
  letter-spacing:.07em !important;
}
.ports-stat-sub{
  margin-top:4px !important;
  font-size:.64rem !important;
  line-height:1.15 !important;
}
.ports-stat-achievements-card,
.ports-stat-top5-card,
.years-card,
.ships-panel{
  min-height:auto !important;
}
.ports-stat-label,
.ships-panel-title,
.ships-panel-mini-title{
  font-size:.66rem !important;
  letter-spacing:.13em !important;
}
.ports-achievements-list{
  margin-top:6px !important;
  gap:4px !important;
}
.ports-achievements-list div{
  font-size:.74rem !important;
  line-height:1.15 !important;
  gap:5px !important;
}
.years-card-header,
.ships-panel-header{
  margin-bottom:6px !important;
}
.years-card-badge,
.ships-panel-badge{
  font-size:.54rem !important;
  padding:2px 8px !important;
}
.ports-top5-list,
.ships-panel-list,
.ships-years-list{
  margin-top:6px !important;
  gap:5px !important;
}
.ports-top5-item{
  grid-template-columns:auto minmax(0,1.2fr) minmax(92px,.82fr) auto !important;
  gap:6px !important;
}
.ports-top5-rank,
.ports-top5-name,
.ports-top5-count,
.ship-name,
.ship-count-text,
.ship-count,
.ships-year-label,
.ships-year-count,
.ships-panel-sub,
.ships-panel-most-value{
  font-size:.72rem !important;
}
.ports-top5-bar,
.ships-year-bar{
  height:6px !important;
}
.ships-panel{
  padding:11px !important;
  border-radius:16px !important;
}
.ships-panel-kpi{
  padding:9px 10px 8px !important;
  gap:8px !important;
}
.ships-panel-kpi-icon{
  width:28px !important;
  height:28px !important;
  font-size:.9rem !important;
  border-radius:10px !important;
}
.ships-panel-count{
  font-size:1.8rem !important;
  line-height:1 !important;
}
.ships-panel-most,
.ships-panel-list-wrap{
  margin-top:8px !important;
  padding:8px 9px 0 !important;
}
.ships-year-item{
  gap:6px !important;
  grid-template-columns:40px minmax(0,1fr) auto !important;
}
.ship-rank{
  width:18px !important;
  flex-basis:18px !important;
  font-size:.7rem !important;
}

@media (max-width: 980px){
  .status-row-insights{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 720px){
  .status-dashboard,
  .status-row{
    gap:8px !important;
  }
  .port-favorite-btn{width:100%; justify-content:center; margin-left:0;}
  .status-row-kpis,
  .status-row-insights{
    grid-template-columns:1fr !important;
  }
  .ports-stat{
    padding:8px 9px 8px !important;
    border-radius:13px !important;
  }
  .ports-stat-kpi{
    min-height:auto !important;
    gap:2px !important;
  }
  .ports-stat-icon{
    width:22px !important;
    height:22px !important;
    font-size:.68rem !important;
  }
  .ports-stat-kpi-value{
    font-size:1.55rem !important;
  }
  .ports-stat-kpi-text{
    font-size:1.02rem !important;
    max-width:none !important;
  }
  .ports-stat-kpi-label{
    font-size:.63rem !important;
  }
  .ports-stat-sub,
  .ports-stat-label,
  .ports-achievements-list div,
  .ports-top5-rank,
  .ports-top5-name,
  .ports-top5-count,
  .ship-name,
  .ship-count-text,
  .ship-count,
  .ships-year-label,
  .ships-year-count,
  .ships-panel-sub,
  .ships-panel-most-value{
    font-size:.66rem !important;
  }
  .ports-top5-item{
    grid-template-columns:auto minmax(0,1fr) minmax(56px,.7fr) auto !important;
    gap:5px !important;
  }
  .ports-top5-bar,
  .ships-year-bar{
    height:5px !important;
  }
  .ships-panel{
    padding:9px !important;
  }
  .ships-panel-kpi{
    padding:8px 9px 7px !important;
  }
  .ships-panel-kpi-icon{
    width:24px !important;
    height:24px !important;
    font-size:.76rem !important;
  }
  .ships-panel-count{
    font-size:1.55rem !important;
  }
  .ships-panel-most,
  .ships-panel-list-wrap{
    margin-top:6px !important;
    padding:7px 8px 0 !important;
  }
}


/* Ships Sailed collapsible panel */
.ships-panel-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ships-panel-toggle{
  appearance:none;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.5);
  color:var(--text);
  border-radius:999px;
  padding:4px 10px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
}
.ships-panel-toggle:hover{
  transform:translateY(-1px);
}
.ships-panel-body.is-collapsed{
  display:none;
}


/* Ships Sailed compact analytics refresh */
.ships-panel{
  position:relative;
  overflow:hidden;
}
.ships-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(168,85,247,.9));
  opacity:.9;
}
.ships-panel-body{
  display:block;
}
.ships-panel-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.ships-panel-toggle,
.ships-panel-link{
  appearance:none;
  border:1px solid rgba(148,163,184,.34);
  background:rgba(255,255,255,.72);
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font:inherit;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
body:not(.light) .ships-panel-toggle,
body:not(.light) .ships-panel-link{
  background:rgba(255,255,255,.05);
}
.ships-panel-summary-strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}
.ships-mini-stat{
  min-width:0;
  border-radius:16px;
  padding:12px 12px 10px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(148,163,184,.20);
}
body:not(.light) .ships-mini-stat{
  background:rgba(255,255,255,.04);
}
.ships-mini-stat-icon{
  font-size:1rem;
  line-height:1;
  margin-bottom:8px;
}
.ships-mini-stat-value{
  font-size:1.7rem;
  font-weight:850;
  letter-spacing:-.03em;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ships-mini-stat-value--text{
  font-size:1rem;
  letter-spacing:-.01em;
}
.ships-mini-stat-name{
  margin-top:2px;
  font-size:.88rem;
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ships-mini-stat-label{
  margin-top:4px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.ships-panel-most--compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ships-panel-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.ships-panel-list--leaderboard{
  display:grid;
  gap:8px;
}
.ship-row--leaderboard{
  display:grid !important;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center !important;
  gap:10px !important;
  padding:0 !important;
}
.ship-row--leaderboard .ship-rank{
  width:30px;
  flex:0 0 30px;
  text-align:center;
  font-size:.95rem;
}
.ship-row--leaderboard .ship-item-main{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:5px;
  min-width:0;
}
.ship-row--leaderboard .ship-name{
  font-weight:750;
  font-size:.97rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ship-bar{
  display:block;
  width:100%;
  min-width:0;
  height:6px;
  border-radius:999px;
  background:rgba(148,163,184,.18);
  overflow:hidden;
}
.ship-bar-fill{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(168,85,247,.92));
}
.ship-count-pill{
  min-width:28px;
  text-align:center;
  border-radius:999px;
  padding:4px 8px;
  font-size:.78rem;
  font-weight:800;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(148,163,184,.28);
}
body:not(.light) .ship-count-pill{
  background:rgba(255,255,255,.06);
}
.ships-panel-list--extra.is-hidden{
  display:none;
}
#ships-sailed-panel.is-collapsed{
  display:none;
}
@media (max-width: 720px){
  .ships-panel-summary-strip{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .ships-mini-stat:last-child{
    grid-column:1 / -1;
  }
  .ships-panel-most--compact,
  .ships-panel-list-head{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* Ships Sailed polish: most sailed card + animated leaderboard bars */
.status-row-ships{
  margin-bottom:22px;
}
.ships-mini-stat--most-sailed{
  justify-content:flex-start;
}
.ships-mini-stat-value--most{
  font-size:1.02rem;
  line-height:1.15;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.ships-mini-stat-name--most{
  margin-top:6px;
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.ship-bar-fill{
  display:block;
  width:var(--ship-bar-width, 0%);
  min-width:8px;
  transform-origin:left center;
  transition:width .72s cubic-bezier(.22,.61,.36,1);
  will-change:width;
}
.ships-panel-list--animated .ship-bar-fill{
  width:var(--ship-bar-width, 0%);
}

.hidden{ display:none !important; }


.status-toolbar{display:flex;justify-content:flex-end;align-items:center;margin:0 0 10px 0}
.status-toolbar-btn{font-weight:700}
.timeline-modal-open{overflow:hidden}
.timeline-modal{position:fixed;inset:0;z-index:9999}
.timeline-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.72);backdrop-filter:blur(6px)}
.timeline-modal-dialog{position:relative;height:100%;width:min(1100px,100%);margin:0 auto;background:var(--card-bg,#0f172a);color:var(--text,#e5e7eb);border-left:1px solid var(--card-border,rgba(148,163,184,.18));border-right:1px solid var(--card-border,rgba(148,163,184,.18));display:flex;flex-direction:column;box-shadow:var(--card-shadow,0 20px 60px rgba(0,0,0,.35))}
.timeline-modal-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border-bottom:1px solid var(--card-border,rgba(148,163,184,.16));position:sticky;top:0;background:var(--surface-2,rgba(15,23,42,.96));z-index:2}
.timeline-modal-header h2{margin:2px 0 0;font-size:1.35rem}
.timeline-modal-kicker{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#94a3b8)}
.timeline-modal-close{border:1px solid var(--card-border,rgba(148,163,184,.25));background:transparent;color:inherit;border-radius:999px;padding:10px 14px;font-weight:700;cursor:pointer}
.timeline-modal-body{padding:20px;overflow:auto}
.timeline-modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--card-border,rgba(148,163,184,.16));background:var(--surface-2,rgba(15,23,42,.96));position:sticky;bottom:0;z-index:3}
.timeline-modal-close-bottom{display:none}
.timeline-year-group + .timeline-year-group{margin-top:20px}
.timeline-year-label{font-size:1.2rem;font-weight:800;margin-bottom:10px}
.timeline-year-items{display:grid;gap:12px}
.timeline-trip-card{border:1px solid var(--card-border,rgba(148,163,184,.18));border-radius:18px;background:var(--row-bg,rgba(15,23,42,.55));overflow:hidden;box-shadow:var(--card-shadow,0 10px 26px rgba(0,0,0,.18))}
.timeline-trip-summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;cursor:pointer}
.timeline-trip-summary::-webkit-details-marker{display:none}
.timeline-trip-title{font-weight:800;font-size:1rem}
.timeline-trip-meta{margin-top:4px;color:var(--muted,#94a3b8);font-size:.95rem}
.timeline-trip-chevron{font-size:.85rem;color:var(--muted,#94a3b8);font-weight:700}
.timeline-trip-card[open] .timeline-trip-chevron{color:var(--text,#e5e7eb)}
.timeline-trip-details{padding:0 18px 18px}
.timeline-trip-route{padding:12px 0 8px;border-top:1px solid var(--border,rgba(148,163,184,.12))}
.timeline-trip-stats{display:flex;flex-wrap:wrap;gap:8px 10px;margin:8px 0 10px}
.timeline-trip-stats span,.timeline-trip-newports{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--chip-bg,rgba(148,163,184,.12));font-size:.92rem;border:1px solid var(--border,rgba(148,163,184,.18))}
.timeline-trip-newports{display:flex;flex-wrap:wrap}
.timeline-trip-actions{margin-top:12px}
.timeline-empty{padding:22px;border:1px dashed var(--card-border,rgba(148,163,184,.24));border-radius:16px;color:var(--muted,#94a3b8)}
body.light .timeline-modal-backdrop{background:rgba(148,163,184,.32)}
body.light .timeline-modal-close{background:rgba(255,255,255,.72)}
body.light .timeline-trip-card{box-shadow:0 12px 28px rgba(15,23,42,.08)}
@media (max-width: 700px){
  .timeline-modal-header{padding:14px 14px 12px;align-items:flex-start}
  .timeline-modal-header h2{font-size:1.1rem}
  .timeline-modal-body{padding:14px 14px 90px}
  .timeline-modal-footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));justify-content:center}
  .timeline-modal-close-top{display:none}
  .timeline-modal-close-bottom{display:inline-flex;align-items:center;justify-content:center;width:min(100%,360px)}
  .timeline-trip-summary{padding:14px}
  .timeline-trip-details{padding:0 14px 14px}
  .timeline-trip-stats span,.timeline-trip-newports{font-size:.88rem}
}


/* Shared profile read-only mode */
body.shared-profile #login-backdrop,
body.shared-profile #trip-form-card,
body.shared-profile #open-add-trip,
body.shared-profile #backup-btn,
body.shared-profile #restore-btn,
body.shared-profile label[for="import-input"],
body.shared-profile #import-input,
body.shared-profile #change-user-btn,
body.shared-profile #share-profile-btn,
body.shared-profile [data-private-docs],
body.shared-profile .planner-add,
body.shared-profile .doc-delete,
body.shared-profile .planner-docs-upload{ display:none !important; }
body.shared-profile .trip-row{ cursor:default; }
body.shared-profile .trip-actions .btn-danger{ display:none !important; }


.payment-tracker{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--surface-border);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(56,189,248,.08), rgba(168,85,247,.06));
}

.payment-progress{
  grid-column:1 / -1;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--row-border);
  background:var(--row-bg);
}
.payment-progress-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  font-size:.84rem;
  color:var(--text);
}
.payment-progress-top span{ color:var(--muted); font-weight:700; }
.payment-progress-bar{
  height:9px;
  border-radius:999px;
  overflow:hidden;
  margin-top:8px;
  background:rgba(148,163,184,.22);
}
.payment-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(34,174,234,.95), rgba(16,185,129,.95));
  transition:width .25s ease;
}

.payment-summary{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap:8px;
  margin: 10px 0 12px;
}
.payment-stat{
  padding: 10px;
  border-radius: 12px;
  background: var(--row-bg);
  border:1px solid var(--row-border);
}
.payment-stat-label{ font-size:.72rem; color:var(--muted); }
.payment-stat-value{ font-size:.92rem; font-weight:700; color:var(--text); margin-top:2px; }
.payment-list{ display:grid; gap:8px; }
.payment-empty{ font-size:.82rem; color:var(--muted); }
.payment-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--row-border);
  background: var(--row-bg);
}
.payment-row-top{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-size:.82rem;
}
.payment-row-meta{ font-size:.76rem; color:var(--muted); margin-top:2px; }
.btn-small{ padding:6px 10px; font-size:.78rem; }
@media (max-width: 640px){
  .payment-summary{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payment-row{ grid-template-columns: 1fr; }
}


/* =========================
   COMMAND CENTER STATUS HELP
========================== */
.command-center-health-help{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  padding:0;
  cursor:pointer;
  opacity:.9;
  line-height:1;
}
.command-center-health-help:hover{
  opacity:1;
  text-decoration:underline;
}
.status-help-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.55);
}
.status-help-modal{
  width:min(720px, 96vw);
  max-height:min(88vh, 960px);
  overflow:auto;
  background:var(--surface, rgba(17,24,39,.98));
  color:var(--text, #e5e7eb);
  border:1px solid var(--surface-border, rgba(148,163,184,.25));
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.status-help-header{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  background:inherit;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.status-help-header h3{
  margin:0;
  font-size:1.05rem;
}
.status-help-close{
  appearance:none;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.06);
  color:var(--text, #e5e7eb);
  width:34px;
  height:34px;
  border-radius:999px;
  cursor:pointer;
  font-size:16px;
}
.status-help-body{
  padding:16px 18px 18px;
}
.status-help-body p{
  margin:0 0 10px;
  line-height:1.45;
}
.status-help-body h4{
  margin:0 0 12px;
  font-size:.95rem;
}
.status-help-item{
  margin:0 0 14px;
}
.status-help-item strong{
  display:block;
  margin-bottom:4px;
}
.status-help-body hr{
  border:0;
  border-top:1px solid rgba(148,163,184,.18);
  margin:16px 0;
}
.status-help-note{
  color:var(--muted);
  font-size:.95rem;
}


.status-help-handle{
  display:none;
}

@media (max-width: 640px){
  .status-help-overlay{
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(0,0,0,.62);
  }
  .status-help-modal{
    width:100%;
    max-height:85vh;
    margin:0;
    border-radius:18px 18px 0 0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-left:0;
    border-right:0;
    border-bottom:0;
    box-shadow:0 -10px 40px rgba(0,0,0,.45);
    animation:statusHelpSheetUp .22s ease-out;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }
  .status-help-handle{
    display:block;
    width:42px;
    height:5px;
    border-radius:999px;
    background:rgba(148,163,184,.45);
    margin:10px auto 2px;
  }
  .status-help-header{
    padding:10px 16px 10px;
  }
  .status-help-header h3{
    font-size:1rem;
  }
  .status-help-close{
    width:36px;
    height:36px;
    font-size:18px;
    flex:0 0 36px;
  }
  .status-help-body{
    padding:10px 16px 18px;
  }
  .status-help-body p{
    font-size:.96rem;
    line-height:1.5;
    margin:0 0 12px;
  }
  .status-help-body h4{
    margin:4px 0 10px;
    font-size:.95rem;
  }
  .status-help-item{
    margin:0 0 12px;
  }
  .status-help-item strong{
    margin-bottom:3px;
    font-size:.98rem;
  }
  .status-help-note{
    font-size:.9rem;
    padding-bottom:4px;
  }
}

@keyframes statusHelpSheetUp{
  from{
    transform:translateY(28px);
    opacity:.0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}


/* Hide old checklist view; alerts now open in badge panel */
#view-checklist{ display:none !important; }

/* Alerts badge button */
.tab-alerts-btn,
.m-alerts-btn{ position:relative; }
.alerts-count-badge,
.m-alert-count-badge{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
  font-size:.66rem;
  font-weight:800;
  line-height:1;
  box-shadow:0 0 0 2px rgba(2,6,23,.18);
}
.alerts-count-badge{ margin-left:2px; }
.m-alert-count-badge{
  position:absolute;
  top:6px;
  right:10px;
}
.tab-alerts-btn.has-alerts .icon,
.m-alerts-btn.has-alerts .m-ico{
  animation:alertsPulse 1.6s ease-in-out infinite;
}

/* Alerts panel */
.alerts-panel-overlay{
  position:fixed;
  inset:0;
  z-index:10020;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:88px 18px 18px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
}
.alerts-panel-modal{
  width:min(760px,100%);
  max-height:min(82vh,900px);
  overflow:auto;
  background:var(--surface, rgba(17,24,39,.98));
  color:var(--text,#e5e7eb);
  border:1px solid var(--surface-border, rgba(148,163,184,.25));
  border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.alerts-panel-handle{ display:none; }
.alerts-panel-header{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px 12px;
  background:inherit;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.alerts-panel-header h3{ margin:0; font-size:1.05rem; }
.alerts-panel-sub{ margin:4px 0 0; color:var(--muted); font-size:.85rem; }
.alerts-panel-close{
  appearance:none;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(255,255,255,.06);
  color:var(--text,#e5e7eb);
  width:34px; height:34px; border-radius:999px; cursor:pointer; font-size:16px;
}
.alerts-panel-body{ padding:14px 18px 18px; display:flex; flex-direction:column; gap:10px; }

@media (max-width:640px){
  .alerts-panel-overlay{
    align-items:flex-end;
    padding:0;
    background:rgba(0,0,0,.62);
  }
  .alerts-panel-modal{
    width:100%;
    max-height:85vh;
    border-radius:18px 18px 0 0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-left:0; border-right:0; border-bottom:0;
    box-shadow:0 -10px 40px rgba(0,0,0,.45);
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(10px, env(safe-area-inset-bottom));
  }
  .alerts-panel-handle{
    display:block;
    width:42px;
    height:5px;
    border-radius:999px;
    background:rgba(148,163,184,.45);
    margin:10px auto 2px;
  }
  .alerts-panel-header{ padding:10px 16px 10px; }
  .alerts-panel-body{ padding:10px 16px 18px; }
}


/* Help popup content follows site theme */
.help-inline-popup{
  background: var(--surface, rgba(17,24,39,.98));
  color: var(--text, #e5e7eb);
  border-color: var(--surface-border, rgba(148,163,184,.25));
}
.help-inline-popup .status-help-header{
  background: inherit;
}
.help-inline-popup-body{
  background: transparent;
}
.help-inline-popup-body p,
.help-inline-popup-body li{
  color: var(--text);
  opacity: .94;
}
.help-inline-popup-body .status-help-note{
  color: var(--muted);
}
.help-inline-list{
  margin: 8px 0 0 0;
  padding-left: 18px;
}
.help-inline-list li{
  margin: 7px 0;
  line-height: 1.4;
}
body.light .help-inline-popup-body p,
body.light .help-inline-popup-body li{
  color: var(--text);
  opacity: 1;
}

@media (max-width: 640px){
  .help-inline-popup .status-help-body{
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}


/* Premium hover / press polish */
.card,
.kpi,
.trip-row,
.planner-item,
.check-item,
.alerts-group-item{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
}
@media (hover:hover){
  .card:hover,
  .kpi:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(0,0,0,.10);
  }
  .trip-row:hover,
  .planner-item:hover,
  .check-item:hover,
  .alerts-group-item:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
  }
  .btn:hover,
  .pill-link:hover,
  .tab-btn:hover{
    filter: brightness(1.06);
  }
}
.btn:active,
.pill-link:active,
.tab-btn:active{
  transform: translateY(1px) scale(.99);
}

/* Command Center pro polish */
.command-center-next-step-live{
  position: relative;
  animation: ccNextPulse 2.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(56,189,248,.18);
}
.command-center-next-step-live::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 24px rgba(56,189,248,.14);
  pointer-events: none;
}
.command-center-due-soon{
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(251,191,36,.25);
  background: rgba(251,191,36,.10);
  font-size: .85rem;
}
.command-center-due-soon.urgent{
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.10);
}
@keyframes ccNextPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(56,189,248,.08); }
  50%{ box-shadow: 0 0 0 8px rgba(56,189,248,0); }
}

/* Alerts system */
.alerts-group + .alerts-group{
  margin-top: 14px;
}
.alerts-group h4{
  margin: 0 0 10px;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.alerts-group-item{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.alerts-group-item.urgent{
  border-color: rgba(248,113,113,.30);
  background: rgba(248,113,113,.06);
}
.alerts-group-item.planning{
  border-color: rgba(251,191,36,.28);
  background: rgba(251,191,36,.06);
}
.alerts-group-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.alerts-group-title{
  font-weight: 700;
}
.alerts-group-sub{
  font-size: .84rem;
  color: var(--muted);
}
.alerts-quick-action{
  min-width: 96px;
}

/* Planner memory hints */
.planner-memory-hint{
  display:none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  background: rgba(255,255,255,.03);
  font-size: .82rem;
}
.planner-memory-hint strong{
  display:block;
  margin-bottom: 4px;
}
.planner-memory-hint.similar{
  border-color: rgba(251,191,36,.30);
  background: rgba(251,191,36,.08);
}
.planner-memory-hint.exact{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}
.planner-memory-badge{
  display:inline-flex;
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: .73rem;
  border: 1px solid var(--surface-border);
}
.planner-memory-badge.exact{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.28);
}
.planner-memory-badge.similar{
  background: rgba(251,191,36,.10);
  border-color: rgba(251,191,36,.28);
}


.command-center-alert.is-clickable{
  cursor: pointer;
  text-align: left;
  width: 100%;
  background: inherit;
}
@media (hover:hover){
  .command-center-alert.is-clickable:hover{
    filter: brightness(1.04);
    transform: translateY(-1px);
  }
}


.command-center-next-step.is-clickable{
  cursor:pointer;
  text-align:left;
  width:100%;
  border:none;
}
.command-center-alert.is-clickable{
  cursor:pointer;
  text-align:left;
  width:100%;
  border:none;
}


/* Guided micro-feedback */
.guided-pulse{
  animation: guidedPulse 1.6s ease-out;
  position: relative;
}
.guided-pulse::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  border: 2px solid rgba(56,189,248,.65);
  box-shadow: 0 0 0 0 rgba(56,189,248,.28), 0 0 20px rgba(56,189,248,.18);
  pointer-events:none;
  animation: guidedPulseRing 1.6s ease-out;
}
@keyframes guidedPulse{
  0%,100%{ box-shadow:none; }
  18%{ box-shadow: 0 0 0 4px rgba(56,189,248,.10); }
}
@keyframes guidedPulseRing{
  0%{ opacity:0; transform:scale(.98); }
  20%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.03); }
}


.command-center-pay-btn{
  margin-left: 8px;
}
@media (max-width: 640px){
  .command-center-pay-btn{
    margin-left: 0;
    margin-top: 8px;
  }
}



/* Alerts panel theme fix */
.alerts-panel-modal{
  background: var(--surface-2, var(--surface, #0f172a)) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.25)) !important;
}

.alerts-panel-header{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) !important;
  border-bottom: 1px solid var(--surface-border, rgba(148,163,184,.18)) !important;
}

.alerts-panel-header h3,
.alerts-panel-sub{
  color: var(--text, #e5e7eb) !important;
}

.alerts-panel-sub{
  opacity: .82;
}

.alerts-panel-close{
  background: rgba(255,255,255,.06) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.22)) !important;
}

.alerts-group-item{
  background: var(--surface, rgba(255,255,255,.03)) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.22)) !important;
}

.alerts-group-item.urgent{
  background: rgba(248,113,113,.10) !important;
  border-color: rgba(248,113,113,.30) !important;
}

.alerts-group-item.planning{
  background: rgba(251,191,36,.10) !important;
  border-color: rgba(251,191,36,.28) !important;
}

.alerts-group-title{
  color: var(--text, #e5e7eb) !important;
}

.alerts-group-sub{
  color: var(--muted, #94a3b8) !important;
}

.alerts-quick-action{
  background: rgba(255,255,255,.08) !important;
  color: var(--text, #e5e7eb) !important;
  border: 1px solid var(--surface-border, rgba(148,163,184,.22)) !important;
}

body.light .alerts-panel-modal{
  background: var(--surface-2, #ffffff) !important;
  color: var(--text, #0f172a) !important;
  border-color: var(--surface-border, rgba(148,163,184,.22)) !important;
}

body.light .alerts-panel-header{
  background: linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,0)) !important;
}

body.light .alerts-panel-header h3,
body.light .alerts-panel-sub,
body.light .alerts-group-title{
  color: var(--text, #0f172a) !important;
}

body.light .alerts-group-sub{
  color: var(--muted, #475569) !important;
}

body.light .alerts-group-item{
  background: #ffffff !important;
}

body.light .alerts-group-item.urgent{
  background: rgba(248,113,113,.06) !important;
}

body.light .alerts-group-item.planning{
  background: rgba(251,191,36,.06) !important;
}

body.light .alerts-quick-action{
  background: rgba(15,23,42,.04) !important;
  color: var(--text, #0f172a) !important;
}



/* Smart alerts text color fix for dark mode */
.command-center-panel,
.command-center-panel h3,
.command-center-empty,
.command-center-today-item,
.command-center-today-time{
  color: var(--text, #e5e7eb);
}

.command-center-alert{
  color: var(--text, #e5e7eb) !important;
}

.command-center-alert .muted,
.command-center-next-step .muted{
  color: var(--muted, #94a3b8) !important;
}

body.light .command-center-panel,
body.light .command-center-panel h3,
body.light .command-center-empty,
body.light .command-center-today-item,
body.light .command-center-today-time,
body.light .command-center-alert{
  color: var(--text, #0f172a) !important;
}

body.light .command-center-alert .muted,
body.light .command-center-next-step .muted{
  color: var(--muted, #475569) !important;
}



/* Mobile popup sheet hard-fix for Alerts / Trip Status Guide / Help */
@media (max-width: 768px){
  .status-help-overlay,
  .alerts-panel-overlay{
    position: fixed !important;
    inset: 0 !important;
    display: flex;
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.62) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .status-help-modal,
  .alerts-panel-modal,
  .help-inline-popup{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    max-height: min(86svh, 86vh) !important;
    margin: 0 !important;
    transform: none !important;
    border-radius: 18px 18px 0 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -12px 40px rgba(0,0,0,.42) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    animation: mobilePopupSheetUp .22s ease-out;
  }

  .status-help-header,
  .alerts-panel-header{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    padding: 10px 16px !important;
  }

  .status-help-body,
  .alerts-panel-body,
  .help-inline-popup .status-help-body{
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  .status-help-handle,
  .alerts-panel-handle{
    display: block !important;
    width: 42px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: rgba(148,163,184,.45) !important;
    margin: 10px auto 2px !important;
  }
}

@keyframes mobilePopupSheetUp{
  from{ transform: translateY(16px); opacity:.92; }
  to{ transform: translateY(0); opacity:1; }
}

/* Countdown polish */
.countdown-highlight {
  animation: glowPulse 2.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(56,189,248,0); }
  50% { box-shadow: 0 0 12px rgba(56,189,248,0.4); }
  100% { box-shadow: 0 0 0 rgba(56,189,248,0); }
}
/* ===== COMMAND CENTER (LEVEL 2) ===== */

.next-up-block {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
}

.next-up-title {
  font-weight: 600;
  font-size: 14px;
}

.next-up-date {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
}

/* Now / Next / Later sections */

.cc-row {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
}

.cc-label {
  font-size: 11px;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

.cc-main {
  font-weight: 600;
}

/* Dark mode tweak */
body.light .next-up-block,
body.light .cc-row {
  background: rgba(0,0,0,0.05);
}

/* ===== Cruise Log v2 cleanup ===== */
.cruise-log-v2-shell{
  margin-top:12px;
}
.cruise-log-v2-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid var(--surface-border);
  border-radius:14px;
  background: var(--surface);
}
.cruise-log-v2-title{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.cruise-log-v2-sub{
  color:var(--muted);
  font-size:.76rem;
  margin-top:4px;
}
.cruise-log-v2-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ports-quick-filter{
  display:inline-flex;
  gap:6px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background:var(--surface);
}
.ports-filter-btn{
  border:none;
  background:transparent;
  color:var(--muted);
  padding:6px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}
.ports-filter-btn.is-active{
  background:linear-gradient(90deg,#38bdf8,#a855f7);
  color:#fff;
  box-shadow:0 0 18px rgba(56,189,248,.28);
}
.ports-explorer-list{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .3s ease, opacity .24s ease, transform .24s ease;
  will-change:max-height, opacity, transform;
}
.ports-explorer-list.is-open{
  opacity:1;
  transform:translateY(0);
}
.ports-explorer-list.is-collapsed{
  max-height:0 !important;
  opacity:0;
  transform:translateY(-6px);
}
.port-stat-head--compact{
  gap:6px;
}
.port-stat-name-line{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.port-favorite-btn{
  margin-left:auto;
  appearance:none;
  border:1px solid rgba(130,145,170,.28);
  background:rgba(255,255,255,.72);
  color:var(--text);
  border-radius:999px;
  padding:4px 10px;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.port-favorite-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(27,44,79,.10);
}
.port-favorite-btn.is-favorite{
  border-color:rgba(255,196,0,.45);
  background:rgba(255,244,200,.78);
  color:#8a6400;
}
.port-stat-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.port-mini-pill{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background:var(--surface);
  color:var(--muted);
  font-size:.68rem;
  white-space:nowrap;
}
.port-stat-row{
  margin-bottom:8px;
}
.port-stat-summary{
  padding:10px 12px;
}
.port-stat-name{
  font-size:.95rem;
  line-height:1.15;
}
.port-stat-sub-main{
  font-size:.78rem;
}
.port-stat-timeline--compact{
  font-size:.72rem;
  line-height:1.3;
  color:var(--muted);
}
.port-journal-grid{
  gap:8px;
}
.port-journal-card{
  padding:10px;
}
.port-trip-item{
  padding:8px 0;
}
@media (max-width:700px){
  .cruise-log-v2-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .cruise-log-v2-actions{
    width:100%;
    flex-direction:column;
    align-items:stretch;
  }
  .ports-quick-filter{
    width:100%;
    justify-content:space-between;
  }
  .ports-filter-btn{
    flex:1 1 0;
  }
  .cruise-log-v2-toggle{
    width:100%;
  }
  .port-stat-summary{
    padding:9px 10px;
  }
  .port-stat-name{
    font-size:.9rem;
  }
  .port-mini-pill{
    font-size:.64rem;
    padding:2px 7px;
  }
}


/* Cruise Log v2 polish */
#ports-map{
  opacity:.68;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease;
}
#ports-map.is-visible{
  opacity:1;
  transform:translateY(0);
}
.ports-top5-bar-fill,
.ships-year-bar-fill,
.ship-bar-fill{
  transform-origin:left center;
}
.ports-top5-bar-fill.is-animated,
.ships-year-bar-fill.is-animated,
.ship-bar-fill.is-animated{
  animation:cruiseLogBarGrow .75s ease both;
}
@keyframes cruiseLogBarGrow{
  from{ transform:scaleX(.08); opacity:.35; }
  to{ transform:scaleX(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .ports-explorer-list,
  #ports-map,
  .ports-top5-bar-fill,
  .ships-year-bar-fill,
  .ship-bar-fill{ transition:none !important; animation:none !important; }
}


/* ===== Port Trips Modal ===== */
.port-trips-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(2,6,23,.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
}
.port-trips-modal{
  width: min(760px, 96vw);
  max-height: 86vh;
  overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  padding: 16px;
}
.port-trips-modal-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.port-trips-modal-kicker{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
.port-trips-modal-header h3{
  margin:0;
  font-size:1.25rem;
}
.port-trips-modal-body{
  display:grid;
  gap:10px;
}
.port-trip-mini-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid var(--surface-border);
  background: var(--row-bg);
  border-radius:16px;
  padding:12px 14px;
}
.port-trip-mini-title{
  font-weight:800;
  font-size:.98rem;
  margin-bottom:4px;
}
.port-trip-mini-meta{
  font-size:.83rem;
  color:var(--muted);
}
.port-trip-mini-sub{
  margin-top:4px;
  font-size:.76rem;
  color:var(--muted);
}
.port-trip-mini-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.port-trip-mini-route{
  margin-top:10px;
  position:relative;
}
.route-preview-wrap{
  position:relative;
}
.route-preview-wrap::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:36px;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.92));
  border-radius:0 16px 16px 0;
}
body.light .route-preview-wrap::after{
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96));
}
body:not(.light) .route-preview-wrap::after{
  background:linear-gradient(90deg, rgba(15,23,42,0), rgba(15,23,42,.96));
}
.route-preview-scroll{
  padding:8px 10px;
  border:1px solid var(--surface-border);
  border-radius:16px;
  background: rgba(255,255,255,0.04);
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
}
body.light .route-preview-scroll{
  background: rgba(15,23,42,0.04);
}
.route-preview-track{
  display:inline-flex;
  align-items:center;
  gap:0;
  min-width:max-content;
}
.port-trip-mini-route .route-stop{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background: var(--card-bg);
  font-weight:700;
  color:var(--text);
  font-size:.9rem;
  line-height:1;
}
.port-trip-mini-route .route-stop-label{
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.port-trip-mini-route .route-stop-home{
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.18);
}
.port-trip-mini-route .route-stop-sea{
  background: rgba(56,189,248,0.10);
  padding:7px 10px;
}
.port-trip-mini-route .route-stop-selected{
  border-color: rgba(56,189,248,.75);
  box-shadow: 0 0 0 2px rgba(56,189,248,.18);
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(168,85,247,.10));
}
.port-trip-mini-route .route-arrow{
  display:inline-block;
  margin:0 8px;
  color:var(--muted);
  font-weight:800;
}
@media (max-width:640px){
  .port-trip-mini-card{
    grid-template-columns:1fr;
  }
  .port-trip-mini-actions{
    justify-content:flex-start;
  }
}


/* ===== Mobile UI v2 for Port Trips Modal ===== */
@media (max-width: 640px){
  .port-trips-modal-overlay{
    align-items: flex-end;
    padding: 0;
    background: rgba(2,6,23,.66);
    backdrop-filter: blur(10px);
  }

  .port-trips-modal{
    width: 100%;
    max-width: none;
    max-height: 82vh;
    border-radius: 22px 22px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 14px 14px 16px;
    box-shadow: 0 -18px 42px rgba(0,0,0,.38);
    animation: portTripsSheetIn .24s ease-out;
  }

  .port-trips-modal::before{
    content:'';
    display:block;
    width:44px;
    height:5px;
    border-radius:999px;
    background: rgba(148,163,184,.55);
    margin: 0 auto 12px;
  }

  .port-trips-modal-header{
    align-items:flex-start;
    gap:10px;
    margin-bottom:10px;
  }

  .port-trips-modal-kicker{
    font-size:.70rem;
    letter-spacing:.16em;
    margin-bottom:6px;
  }

  .port-trips-modal-header h3{
    font-size:1rem;
    line-height:1.15;
    max-width: 78%;
  }

  .port-trips-modal-header .btn{
    padding:8px 12px;
    font-size:.82rem;
    min-height:40px;
  }

  .port-trips-modal-body{
    gap:9px;
  }

  .port-trip-mini-card{
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 11px 11px 12px;
    border-radius: 15px;
  }

  .port-trip-mini-title{
    font-size: .92rem;
    line-height: 1.18;
    margin-bottom: 3px;
  }

  .port-trip-mini-meta{
    font-size: .78rem;
    line-height: 1.25;
  }

  .port-trip-mini-sub{
    margin-top: 3px;
    font-size: .72rem;
  }

  .port-trip-mini-route{
    margin-top: 8px;
  }

  .route-preview-wrap::after{
    width: 26px;
  }

  .route-preview-scroll{
    padding: 6px 8px;
    border-radius: 14px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .port-trip-mini-route .route-stop{
    padding: 7px 10px;
    gap: 4px;
    font-size: .82rem;
    scroll-snap-align: start;
  }

  .port-trip-mini-route .route-stop-label{
    max-width: 88px;
  }

  .port-trip-mini-route .route-stop-sea{
    padding: 7px 9px;
  }

  .port-trip-mini-route .route-arrow{
    margin: 0 6px;
    font-size: .95rem;
  }

  .port-trip-mini-actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    margin-top: 2px;
    justify-content:stretch;
  }

  .port-trip-mini-actions .btn{
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    font-size: .86rem;
  }
}

@keyframes portTripsSheetIn{
  from{
    transform: translateY(24px);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}



/* ===== Desktop fix: keep trip modal actions visible ===== */
.port-trip-mini-main{
  min-width: 0;
}

@media (min-width: 768px){
  .port-trips-modal{
    width: min(880px, 92vw);
  }

  .port-trip-mini-card{
    grid-template-columns: minmax(0, 1fr) 148px;
    align-items: start;
  }

  .port-trip-mini-main{
    min-width: 0;
  }

  .port-trip-mini-route{
    min-width: 0;
  }

  .route-preview-wrap{
    min-width: 0;
  }

  .route-preview-scroll{
    max-width: 100%;
  }

  .port-trip-mini-actions{
    width: 148px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    align-self: center;
  }

  .port-trip-mini-actions .btn{
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
  }
}



/* ===== PORT DETAIL MODAL V2 ===== */
.port-trips-modal-v2{
  width:min(880px, 96vw);
}
.port-trips-modal-header-v2{
  align-items:flex-start;
  margin-bottom:14px;
}
.port-detail-hero h3{
  margin:0 0 4px;
  font-size:1.35rem;
}
.port-detail-meta{
  color:var(--muted);
  font-size:.9rem;
}
.port-detail-summary-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.port-detail-stat{
  border:1px solid var(--surface-border);
  background:var(--row-bg);
  border-radius:16px;
  padding:12px 14px;
  min-width:0;
}
.port-detail-stat-label{
  display:block;
  color:var(--muted);
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.port-detail-stat strong{
  display:block;
  font-size:.96rem;
  line-height:1.25;
  word-break:break-word;
}
.port-detail-section{
  margin-top:14px;
}
.port-detail-section-title{
  font-size:.78rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.port-detail-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.port-detail-ship-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--surface-border);
  background:var(--surface);
  color:var(--text);
  font-size:.82rem;
  font-weight:600;
}
.port-detail-empty{
  color:var(--muted);
  font-size:.84rem;
}
@media (max-width: 767px){
  .port-trips-modal-v2{
    width:100%;
  }
  .port-detail-summary-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
  .port-detail-hero h3{
    font-size:1.15rem;
  }
  .port-detail-meta{
    font-size:.84rem;
  }
}

/* ===== Port Memory + Playback + Polish v1 ===== */
.port-memory-section{
  border:1px solid var(--surface-border);
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(168,85,247,.08));
}
.port-memory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.port-memory-field{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.port-memory-field-note{ margin-top:12px; }
.port-memory-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.port-memory-input,
.port-memory-textarea{ width:100%; }
.port-memory-textarea{ min-height:82px; resize:vertical; }
.port-memory-footer{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.port-memory-status{ font-size:.74rem; color:var(--muted); }
.port-trip-mini-card,
.port-detail-stat,
.port-detail-ship-chip,
.route-stop,
.route-stop-label,
.route-preview-wrap{
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .port-trip-mini-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15,23,42,.18);
  }
  .port-detail-ship-chip:hover,
  .route-stop:hover{ transform: translateY(-1px) scale(1.03); }
}
.route-stop-live{
  box-shadow: 0 0 0 1px rgba(56,189,248,.45), 0 0 16px rgba(56,189,248,.28);
  transform: scale(1.05);
}
.tt-enter-card{
  opacity:0;
  transform: translateY(8px);
  animation: ttPortCardIn .35s ease forwards;
  animation-delay: var(--tt-enter-delay, 0ms);
}
@keyframes ttPortCardIn{ to{ opacity:1; transform:none; } }
.ports-playback-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--surface-border);
}
.ports-playback-day{
  font-size:.8rem;
  color:var(--muted);
  margin-left:auto;
}
.route-preview-track{ scroll-behavior:smooth; }
#ports-map.is-visible{ animation: portsMapFadeIn .28s ease; }
@keyframes portsMapFadeIn{
  from{ opacity:.6; transform: translateY(3px); }
  to{ opacity:1; transform:none; }
}
@media (max-width:640px){
  .port-memory-grid{ grid-template-columns:1fr; }
  .ports-playback-controls{ align-items:stretch; }
  .ports-playback-controls .btn{ flex:1 1 calc(50% - 4px); }
  .ports-playback-day{ width:100%; margin-left:0; }
}


/* ===== Port Explorer memory status + insights ===== */
.ports-memory-insights{
  margin-top: 10px;
}
.ports-memory-insights-title{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ports-memory-insights-list{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ports-memory-insight-card{
  min-width: 180px;
  max-width: 260px;
  flex: 1 1 180px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--surface-border);
  background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(168,85,247,.08));
  box-shadow: 0 6px 20px rgba(2,6,23,.10);
}
.ports-memory-insight-name{
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.ports-memory-insight-meta{
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: 6px;
}
.ports-memory-insight-fav{
  font-size: .78rem;
  color: var(--text);
  line-height: 1.35;
}
.port-trip-actions-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.port-trip-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.port-trip-actions .btn{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
@media (hover:hover){
  .port-trip-actions .btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(2,6,23,.18);
  }
}
.port-trip-memory-status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--surface-border);
  background: var(--surface);
  font-size: .72rem;
  font-weight: 700;
  width: fit-content;
  color: var(--muted);
}
.port-trip-memory-status.is-saved{
  border-color: rgba(34,197,94,.40);
  background: rgba(34,197,94,.12);
  color: var(--text);
}
.port-trip-memory-status.is-empty{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.08);
  color: var(--muted);
}
.port-trip-memory-btn.is-has-memory{
  border-color: rgba(34,197,94,.28);
  box-shadow: 0 0 0 1px rgba(34,197,94,.10) inset;
}
.port-trip-memory-btn.is-empty-memory{
  border-style: dashed;
}
.port-trip-memory.pulse-highlight{
  outline: 2px solid rgba(56,189,248,.42);
  box-shadow: 0 0 0 6px rgba(56,189,248,.10);
}
@media (max-width: 680px){
  .ports-memory-insights-list{
    display: grid;
    grid-template-columns: 1fr;
  }
  .port-trip-actions{
    flex-direction: column;
  }
  .port-trip-actions .btn{
    width: 100%;
    justify-content: center;
  }
}


/* Memory insights are clickable */
.ports-memory-insight-card{
  appearance:none;
  -webkit-appearance:none;
  background:var(--card-bg, #fff);
  border:1px solid var(--line, rgba(148,163,184,.25));
  border-radius:18px;
  padding:14px 16px;
  text-align:left;
  width:100%;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ports-memory-insight-card:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(2,6,23,.10);
  border-color:rgba(56,189,248,.45);
}
.ports-memory-insight-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(56,189,248,.30), 0 10px 24px rgba(2,6,23,.10);
}
.pulse-highlight{
  animation:portMemoryPulse 1.25s ease;
}
@keyframes portMemoryPulse{
  0%{ box-shadow:0 0 0 0 rgba(56,189,248,.0); }
  20%{ box-shadow:0 0 0 4px rgba(56,189,248,.22); }
  60%{ box-shadow:0 0 0 10px rgba(56,189,248,.0); }
  100%{ box-shadow:0 0 0 0 rgba(56,189,248,.0); }
}












/* =========================
  GUIDED DEMO
========================== */
.demo-card{
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.9);
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(30,41,59,.85));
  color: #fff;
  font-size: .85rem;
  display: block;
  box-shadow: 0 10px 24px rgba(2,6,23,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.demo-card-head{
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: 4px;
}
.demo-card-body{
  line-height: 1.35;
  color: #e5e7eb;
}
.demo-card-actions{
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.demo-card-actions button + button{
  margin-left: 8px;
}
.demo-card-actions button{
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .78rem;
  cursor: pointer;
  display: inline-block;
  -webkit-appearance: none;
  appearance: none;
}
.demo-card-primary{
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: white;
}
.demo-card-secondary{
  background: rgba(255,255,255,.10);
  color: white;
  border: 1px solid rgba(255,255,255,.18);
}

/* Light theme */
body.light .demo-card,
html.light .demo-card,
[data-theme="light"] .demo-card{
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.92);
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(241,245,249,.96));
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
body.light .demo-card-head,
html.light .demo-card-head,
[data-theme="light"] .demo-card-head{
  color: #6366f1;
}
body.light .demo-card-body,
html.light .demo-card-body,
[data-theme="light"] .demo-card-body{
  color: #334155;
}
body.light .demo-card-secondary,
html.light .demo-card-secondary,
[data-theme="light"] .demo-card-secondary{
  background: rgba(15,23,42,.04);
  color: #0f172a;
  border: 1px solid rgba(148,163,184,.35);
}

/* Dark theme explicit */
body.dark .demo-card,
html.dark .demo-card,
[data-theme="dark"] .demo-card{
  border: 1px solid rgba(148,163,184,.25);
  background: rgba(15,23,42,.9);
  background: linear-gradient(135deg, rgba(15,23,42,.85), rgba(30,41,59,.85));
  color: #fff;
}
body.dark .demo-card-head,
html.dark .demo-card-head,
[data-theme="dark"] .demo-card-head{
  color: #c4b5fd;
}
body.dark .demo-card-body,
html.dark .demo-card-body,
[data-theme="dark"] .demo-card-body{
  color: #e5e7eb;
}
body.dark .demo-card-secondary,
html.dark .demo-card-secondary,
[data-theme="dark"] .demo-card-secondary{
  background: rgba(255,255,255,.10);
  color: white;
  border: 1px solid rgba(255,255,255,.18);
}

.demo-pulse{
  animation: demoPulse 1.6s ease;
}
@keyframes demoPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); filter: drop-shadow(0 0 0.4rem rgba(56,189,248,.45)); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(56,189,248,0)); }
}
@media (max-width: 640px){
  .demo-card{
    padding: 10px 12px;
    border-radius: 12px;
  }
  .demo-card-actions{
    gap: 6px;
  }
  .demo-card-actions button + button{
    margin-left: 6px;
  }
  .demo-card-actions button{
    padding: 7px 10px;
    font-size: .74rem;
  }
}



/* Memory status variants */
.port-trip-memory-status.is-yes{
  background: rgba(34,197,94,.10);
  color: #15803d;
  border-color: rgba(34,197,94,.28);
}
.port-trip-memory-status.is-maybe{
  background: rgba(245,158,11,.10);
  color: #b45309;
  border-color: rgba(245,158,11,.28);
}
.port-trip-memory-status.is-no{
  background: rgba(239,68,68,.10);
  color: #b91c1c;
  border-color: rgba(239,68,68,.28);
}
body.dark .port-trip-memory-status.is-yes,
html.dark .port-trip-memory-status.is-yes,
[data-theme="dark"] .port-trip-memory-status.is-yes{
  background: rgba(34,197,94,.18);
  color: #bbf7d0;
  border-color: rgba(34,197,94,.32);
}
body.dark .port-trip-memory-status.is-maybe,
html.dark .port-trip-memory-status.is-maybe,
[data-theme="dark"] .port-trip-memory-status.is-maybe{
  background: rgba(245,158,11,.18);
  color: #fde68a;
  border-color: rgba(245,158,11,.32);
}
body.dark .port-trip-memory-status.is-no,
html.dark .port-trip-memory-status.is-no,
[data-theme="dark"] .port-trip-memory-status.is-no{
  background: rgba(239,68,68,.18);
  color: #fecaca;
  border-color: rgba(239,68,68,.32);
}


.demo-card-featured{
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.28);
}
body.light .demo-card-featured,
html.light .demo-card-featured,
[data-theme="light"] .demo-card-featured{
  background: rgba(56,189,248,.08);
  border-color: rgba(56,189,248,.24);
  color: #0f172a;
}



/* Don’t rebook / memory warning */
.planner-memory-warning{
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .75rem;
  border: 1px solid;
}
.planner-memory-warning.yes{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: #15803d;
}
.planner-memory-warning.maybe{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.28);
  color: #b45309;
}
.planner-memory-warning.no{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.28);
  color: #b91c1c;
}
.planner-memory-warning.saved{
  background: rgba(59,130,246,.10);
  border-color: rgba(59,130,246,.24);
  color: #1d4ed8;
}
body.dark .planner-memory-hint.memory-yes,
html.dark .planner-memory-hint.memory-yes,
[data-theme="dark"] .planner-memory-hint.memory-yes,
body.dark .planner-memory-warning.yes,
html.dark .planner-memory-warning.yes,
[data-theme="dark"] .planner-memory-warning.yes{
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.32);
  color: #bbf7d0;
}
body.dark .planner-memory-hint.memory-maybe,
html.dark .planner-memory-hint.memory-maybe,
[data-theme="dark"] .planner-memory-hint.memory-maybe,
body.dark .planner-memory-warning.maybe,
html.dark .planner-memory-warning.maybe,
[data-theme="dark"] .planner-memory-warning.maybe{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.32);
  color: #fde68a;
}
body.dark .planner-memory-hint.memory-no,
html.dark .planner-memory-hint.memory-no,
[data-theme="dark"] .planner-memory-hint.memory-no,
body.dark .planner-memory-warning.no,
html.dark .planner-memory-warning.no,
[data-theme="dark"] .planner-memory-warning.no{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.32);
  color: #fecaca;
}
body.dark .planner-memory-hint.memory-saved,
html.dark .planner-memory-hint.memory-saved,
[data-theme="dark"] .planner-memory-hint.memory-saved,
body.dark .planner-memory-warning.saved,
html.dark .planner-memory-warning.saved,
[data-theme="dark"] .planner-memory-warning.saved{
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.32);
  color: #bfdbfe;
}



/* Alerts tab: excursion warnings */
.check-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}
.check-section-title{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:2px;
}
.check-meta{
  font-size:.8rem;
  color:var(--muted);
  margin-top:2px;
}
.check-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.check-item-warning{
  align-items:flex-start;
}
.check-item-warning.warning-no{
  border-left:4px solid rgba(239,68,68,.7);
}
.check-item-warning.warning-maybe{
  border-left:4px solid rgba(245,158,11,.7);
}
.check-item-warning.warning-yes{
  border-left:4px solid rgba(34,197,94,.7);
}
.check-item-warning.warning-saved{
  border-left:4px solid rgba(59,130,246,.7);
}
@media (max-width: 700px){
  .check-item-warning{
    flex-direction:column;
  }
  .check-actions{
    width:100%;
  }
}

.port-exc-item .planner-memory-warning{
  display:inline-block;
  margin-top:6px;
}



/* Next-level warnings UI */
.port-stat-name-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.port-warning-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(255,255,255,.72);
  font-size:.68rem;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
}
.port-warning-badge.no{
  background:rgba(239,68,68,.10);
  color:#b91c1c;
  border-color:rgba(239,68,68,.25);
}
.port-warning-badge.maybe{
  background:rgba(245,158,11,.10);
  color:#b45309;
  border-color:rgba(245,158,11,.25);
}
.port-warning-badge.yes{
  background:rgba(34,197,94,.10);
  color:#15803d;
  border-color:rgba(34,197,94,.25);
}
.port-warning-badge.saved{
  background:rgba(59,130,246,.10);
  color:#1d4ed8;
  border-color:rgba(59,130,246,.25);
}
.check-warning-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--surface-border);
  border-radius:14px;
  background:var(--surface);
}
.check-warning-group-head{
  display:flex;
  flex-direction:column;
  gap:2px;
}
body.dark .port-warning-badge,
html.dark .port-warning-badge,
[data-theme="dark"] .port-warning-badge{
  background:rgba(15,23,42,.7);
  color:#e5e7eb;
  border-color:rgba(148,163,184,.28);
}
body.dark .port-warning-badge.no,
html.dark .port-warning-badge.no,
[data-theme="dark"] .port-warning-badge.no{ color:#fecaca; background:rgba(239,68,68,.16); }
body.dark .port-warning-badge.maybe,
html.dark .port-warning-badge.maybe,
[data-theme="dark"] .port-warning-badge.maybe{ color:#fde68a; background:rgba(245,158,11,.16); }
body.dark .port-warning-badge.yes,
html.dark .port-warning-badge.yes,
[data-theme="dark"] .port-warning-badge.yes{ color:#bbf7d0; background:rgba(34,197,94,.16); }
body.dark .port-warning-badge.saved,
html.dark .port-warning-badge.saved,
[data-theme="dark"] .port-warning-badge.saved{ color:#bfdbfe; background:rgba(59,130,246,.16); }



.port-warning-badge{
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.port-warning-badge:hover{
  transform: translateY(-1px);
}


/* Booking advisory modal */
.trip-advisor-backdrop{
  z-index: 10050;
}
.trip-advisor-modal{
  max-width: 520px;
  width: min(92vw, 520px);
}
.trip-advisor-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.trip-advisor-kicker{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.trip-advisor-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.trip-advisor-subject{
  font-size:1.05rem;
  font-weight:800;
  line-height:1.2;
}
.trip-advisor-meta{
  color:var(--muted);
  font-size:.86rem;
}
.trip-advisor-message{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.22);
  color:inherit;
  font-weight:700;
}
.trip-advisor-note{
  padding:10px 12px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--surface-border);
  color:var(--muted);
  font-size:.84rem;
}
.trip-advisor-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
body.dark .trip-advisor-message,
html.dark .trip-advisor-message,
[data-theme="dark"] .trip-advisor-message{
  background:rgba(245,158,11,.16);
  border-color:rgba(245,158,11,.28);
}
@media (max-width:640px){
  .trip-advisor-modal{
    width:min(96vw, 520px);
  }
  .trip-advisor-actions{
    flex-direction:column-reverse;
  }
  .trip-advisor-actions .btn{
    width:100%;
  }
}


.trip-advisor-message.trip-advisor-severity-danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.22);
}
.trip-advisor-message.trip-advisor-severity-warn{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
}
.trip-advisor-message.trip-advisor-severity-ok{
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.22);
}
body.dark .trip-advisor-message.trip-advisor-severity-danger,
html.dark .trip-advisor-message.trip-advisor-severity-danger,
[data-theme="dark"] .trip-advisor-message.trip-advisor-severity-danger{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.28);
}
body.dark .trip-advisor-message.trip-advisor-severity-warn,
html.dark .trip-advisor-message.trip-advisor-severity-warn,
[data-theme="dark"] .trip-advisor-message.trip-advisor-severity-warn{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.28);
}
body.dark .trip-advisor-message.trip-advisor-severity-ok,
html.dark .trip-advisor-message.trip-advisor-severity-ok,
[data-theme="dark"] .trip-advisor-message.trip-advisor-severity-ok{
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.28);
}


/* Install app button + modal */
#install-app-btn{
  white-space: nowrap;
}
.install-help-backdrop{
  z-index: 10060;
}
.install-help-modal{
  max-width: 520px;
  width: min(92vw, 520px);
}
.install-help-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.install-help-kicker{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.install-help-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.install-help-message{
  font-weight:700;
}
.install-help-steps{
  margin:0;
  padding-left:1.15rem;
  color:inherit;
}
.install-help-steps li + li{
  margin-top:6px;
}
.install-help-note{
  padding:10px 12px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--surface-border);
  color:var(--muted);
  font-size:.84rem;
}
.install-help-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:14px;
  flex-wrap:wrap;
}
@media (max-width:640px){
  .install-help-modal{
    width:min(96vw, 520px);
  }
  .install-help-actions{
    flex-direction:column-reverse;
  }
  .install-help-actions .btn{
    width:100%;
  }
}



/* Alerts modal header/body overlap fix */
.alerts-panel-modal{
  display:flex;
  flex-direction:column;
}
.alerts-panel-header{
  position:sticky;
  top:0;
  z-index:2;
  background:inherit;
  flex:0 0 auto;
}
.alerts-panel-body{
  flex:1 1 auto;
  min-height:0;
  padding-top:14px;
}
.alerts-panel-body .alerts-group:first-child{
  margin-top:0;
}
.alerts-panel-body h4{
  margin-top:0;
}
@media (max-width:700px){
  .alerts-panel-header{
    padding-bottom:14px;
  }
  .alerts-panel-body{
    padding-top:16px;
  }
}



/* Alerts modal fixed header + independent body scroll */
.alerts-panel-modal{
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}
.alerts-panel-header{
  position:relative !important;
  top:auto !important;
  z-index:3;
  flex:0 0 auto;
  background:var(--surface, rgba(17,24,39,.98)) !important;
}
.alerts-panel-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:14px;
}
.alerts-panel-handle{
  flex:0 0 auto;
}
@media (max-width:700px){
  .alerts-panel-modal{
    max-height:85vh;
  }
  .alerts-panel-body{
    padding-top:14px;
  }
}



/* Inline Memory Card (Excursion Edit) */
.inline-memory-card{
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.25);
  background:rgba(59,130,246,.06);
}
.inline-memory-title{
  font-weight:700;
  font-size:.9rem;
}
.inline-memory-sub{
  font-size:.8rem;
  color:var(--muted);
  margin-top:2px;
}
.inline-memory-actions{
  margin-top:8px;
}
.inline-memory-btn{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(255,255,255,.08);
  cursor:pointer;
  font-size:.8rem;
}
body.dark .inline-memory-card,
html.dark .inline-memory-card,
[data-theme="dark"] .inline-memory-card{
  background:rgba(59,130,246,.10);
}



/* Alive command center + memory timeline + subtle motion */
.command-center-live-item{
  animation: ccFadeSlideIn .35s ease both;
}
.command-center-live-item:nth-child(2){ animation-delay:.04s; }
.command-center-live-item:nth-child(3){ animation-delay:.08s; }

.command-center-animate-in{
  animation: ccCardLift .28s ease;
}
.command-center-alert,
.planner-memory-warning,
.planner-memory-badge{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.command-center-alert:hover,
.planner-memory-warning:hover,
.planner-memory-badge:hover{
  transform: translateY(-1px);
}

.port-memory-timeline-card{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(99,102,241,.04);
}
.port-memory-timeline-card.compact{
  margin-top:10px;
}
.port-memory-timeline-label{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.port-memory-timeline-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.port-memory-timeline-item{
  display:grid;
  grid-template-columns: 54px 24px 1fr;
  gap:8px;
  align-items:start;
  animation: ccFadeSlideIn .3s ease both;
}
.port-memory-timeline-year{
  font-weight:800;
  color:var(--muted);
}
.port-memory-timeline-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.port-memory-timeline-text{
  line-height:1.3;
}
@keyframes ccFadeSlideIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes ccCardLift{
  from{ opacity:.96; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}



/* Excursion inline actions */
.exc-inline-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}
.exc-memory-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(148,163,184,.32);
  background:rgba(255,255,255,.72);
  color:inherit;
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  line-height:1;
  cursor:pointer;
}
.exc-memory-btn:hover{
  transform:translateY(-1px);
}
body.dark .exc-memory-btn,
html.dark .exc-memory-btn,
[data-theme="dark"] .exc-memory-btn{
  background:rgba(15,23,42,.65);
}



/* Multi-memory system */
.port-trip-memory-sub{
  margin:2px 0 10px;
  font-size:.82rem;
  color:var(--muted);
}
.port-memory-entries{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.port-memory-entry-card{
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.35);
}
.port-memory-entry-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
}
.port-memory-entry-title{
  font-weight:700;
}
.port-memory-footer-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
body.dark .port-memory-entry-card,
html.dark .port-memory-entry-card,
[data-theme="dark"] .port-memory-entry-card{
  background:rgba(15,23,42,.35);
}



/* Excursion smart badges */
.exc-smart-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  font-size:.77rem;
  font-weight:700;
  line-height:1.1;
  width:max-content;
  max-width:100%;
}
.exc-smart-badge.yes{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.22);
  color:#15803d;
}
.exc-smart-badge.no{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.22);
  color:#b91c1c;
}
.exc-smart-badge.maybe{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.22);
  color:#b45309;
}
.exc-smart-badge.saved{
  background:rgba(59,130,246,.10);
  border-color:rgba(59,130,246,.22);
  color:#1d4ed8;
}
body.dark .exc-smart-badge.yes,
html.dark .exc-smart-badge.yes,
[data-theme="dark"] .exc-smart-badge.yes{
  color:#bbf7d0;
  background:rgba(34,197,94,.16);
}
body.dark .exc-smart-badge.no,
html.dark .exc-smart-badge.no,
[data-theme="dark"] .exc-smart-badge.no{
  color:#fecaca;
  background:rgba(239,68,68,.16);
}
body.dark .exc-smart-badge.maybe,
html.dark .exc-smart-badge.maybe,
[data-theme="dark"] .exc-smart-badge.maybe{
  color:#fde68a;
  background:rgba(245,158,11,.16);
}
body.dark .exc-smart-badge.saved,
html.dark .exc-smart-badge.saved,
[data-theme="dark"] .exc-smart-badge.saved{
  color:#bfdbfe;
  background:rgba(59,130,246,.16);
}

.exc-smart-badge{
  animation: fadeInUp .35s ease both;
}
.exc-smart-badge.no{
  animation: fadeInUp .35s ease both, pulseWarn 1.2s ease 1;
}
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes pulseWarn{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.4);}
  70%{box-shadow:0 0 0 8px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}

.exc-smart-badge{
  font-weight:800;
  letter-spacing:.2px;
}
.exc-smart-badge.yes{ background:rgba(34,197,94,.18); }
.exc-smart-badge.no{ background:rgba(239,68,68,.18); }
.exc-smart-badge.maybe{ background:rgba(245,158,11,.18); }

.leaflet-popup-content{
  animation:portPop .25s ease;
}
@keyframes portPop{
  from{transform:scale(.96); opacity:.6;}
  to{transform:scale(1); opacity:1;}
}



/* Command Center footer warning */
.command-center-chip.footer-warn{
  margin-right: 8px;
  align-self: center;
}
@media (max-width: 700px){
  .command-center-chip.footer-warn{
    width: 100%;
    justify-content: center;
    margin-right: 0;
    margin-bottom: 6px;
  }
}



/* Smart Alerts header placement */
.command-center-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.command-center-panel-head h3{
  margin:0;
}
.command-center-health.in-panel{
  margin:0;
  flex-shrink:0;
}
.command-center-health.in-panel .command-center-health-help{
  margin-left:6px;
}
@media (max-width: 700px){
  .command-center-panel-head{
    align-items:flex-start;
    flex-direction:column;
  }
}



/* Smart Alerts inline header */
.command-center-panel-head.inline-alerts{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.command-center-panel-head.inline-alerts h3{
  margin:0;
}
.command-center-panel-head.inline-alerts .command-center-health.in-panel{
  margin-left:auto;
}
@media (max-width: 700px){
  .command-center-panel-head.inline-alerts{
    flex-direction:row;
    align-items:center;
  }
  .command-center-panel-head.inline-alerts .command-center-health.in-panel{
    transform:scale(.94);
    transform-origin:right center;
  }
}



/* Command Center port weather */
.command-center-weather-panel{
  min-height: 132px;
}
.command-center-weather-loading{
  color: var(--muted);
  font-size: .95rem;
}
.command-center-weather-main{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:6px;
}
.command-center-weather-temp{
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.command-center-weather-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.command-center-weather-label{
  font-weight: 700;
}
.command-center-weather-place{
  color: var(--muted);
  font-size: .92rem;
}
.command-center-weather-context{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.9;
  margin:2px 0 10px;
}
.command-center-weather-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.command-center-weather-stats div{
  border:1px solid rgba(148,163,184,.20);
  border-radius:12px;
  padding:8px 10px;
  background: rgba(255,255,255,.28);
}
.command-center-weather-stats span{
  display:block;
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 2px;
}
.command-center-weather-stats strong{
  font-size: 1rem;
}
body.dark .command-center-weather-stats div,
html.dark .command-center-weather-stats div,
[data-theme="dark"] .command-center-weather-stats div{
  background: rgba(15,23,42,.35);
}
@media (max-width: 900px){
  .command-center-weather-stats{
    grid-template-columns: 1fr 1fr 1fr;
  }
}




/* =========================
  MOBILE STICKY MODAL CONTROLS
========================== */
@media (max-width: 820px){
  /* Edit Trip: keep footer actions visible */
  .trip-modal-body{
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .trip-modal-body #trip-form-card .form-footer{
    position: sticky;
    bottom: 0;
    z-index: 7;
    margin-top: 14px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--card-bg);
    border-top: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 -10px 24px rgba(15,23,42,.10);
  }
  .trip-modal-body #trip-form-card .form-footer > div:last-child{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  .trip-modal-body #trip-form-card .form-footer .btn{
    min-height: 42px;
  }

  /* Port memory / Cruise Log modal: keep close reachable */
  .port-trips-modal{
    padding-top: 0;
    overflow: auto;
  }
  .port-trips-modal-header{
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 14px 16px 12px;
    margin: 0 -16px 12px;
    background: var(--card-bg);
    border-bottom: 1px solid rgba(148,163,184,.18);
    box-shadow: 0 8px 18px rgba(15,23,42,.08);
  }
  .port-trips-modal-header .btn,
  .port-trips-modal-header button{
    flex-shrink: 0;
  }
}

/* A little stronger on very small phones */
@media (max-width: 560px){
  .trip-modal-body #trip-form-card .form-footer{
    padding-left: 10px;
    padding-right: 10px;
  }
  .trip-modal-body #trip-form-card .form-footer > div:first-child{
    display:none; /* hide autosave chips in sticky footer on very small screens */
  }
  .trip-modal-body #trip-form-card .form-footer > div:last-child{
    width:100%;
  }
  .trip-modal-body #trip-form-card .form-footer > div:last-child .btn{
    flex:1 1 0;
    min-width:0;
  }

  .port-trips-modal{
    width: min(100vw - 12px, 760px);
    max-height: 92vh;
  }
}




/* =========================
  MOBILE STICKY MODAL CONTROLS — FIXED
========================== */
@media (max-width: 820px){
  /* Make Edit Trip modal behave like a proper docked sheet */
  #trip-modal-backdrop .modal.trip-modal{
    display:flex;
    flex-direction:column;
    max-height:92vh;
    overflow:hidden;
  }
  #trip-modal-backdrop .trip-modal-top{
    position:sticky;
    top:0;
    z-index:12;
    flex:0 0 auto;
  }
  #trip-modal-backdrop .trip-modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px));
  }

  /* Dock Save/Cancel cleanly to the modal bottom */
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    position:sticky;
    bottom:0;
    z-index:11;
    margin:16px -2px -2px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--shell-bg);
    border-top:1px solid rgba(148,163,184,.18);
    box-shadow:0 -8px 18px rgba(15,23,42,.14);
    border-radius:0 0 16px 16px;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:first-child{
    margin-bottom:8px;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child .btn{
    min-height:42px;
  }

  /* Keep memory close button pinned at top */
  .port-trips-modal{
    overflow:auto;
  }
  .port-trips-modal-header{
    position:sticky;
    top:0;
    z-index:12;
  }
}

@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    padding-left:10px;
    padding-right:10px;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:first-child{
    display:none;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child{
    width:100%;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child .btn{
    flex:1 1 0;
    min-width:0;
  }
}




/* =========================
  EDIT TRIP TRUE DOCKED FOOTER
========================== */
.trip-modal-footer-dock{
  display:none;
}

@media (max-width: 820px){
  #trip-modal-backdrop .modal.trip-modal{
    display:flex;
    flex-direction:column;
    max-height:92vh;
    overflow:hidden;
  }
  #trip-modal-backdrop .trip-modal-top{
    position:sticky;
    top:0;
    z-index:12;
    flex:0 0 auto;
  }
  #trip-modal-backdrop .trip-modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding-bottom:18px;
  }

  /* remove the floating sticky footer behavior */
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    position:static !important;
    margin:16px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border-top:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child{
    display:none !important;
  }

  /* real bottom dock */
  #trip-modal-backdrop .trip-modal-footer-dock{
    display:none;
    flex:0 0 auto;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background:var(--shell-bg);
    border-top:1px solid rgba(148,163,184,.18);
    box-shadow:0 -8px 18px rgba(15,23,42,.14);
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:nowrap;
  }
  #trip-modal-backdrop .trip-modal-footer-dock .btn{
    min-height:42px;
  }

  /* keep memory close button pinned at top */
  .port-trips-modal{
    overflow:auto;
  }
  .port-trips-modal-header{
    position:sticky;
    top:0;
    z-index:12;
  }
}

@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:first-child{
    display:none;
  }
  #trip-modal-backdrop .trip-modal-footer-dock{
    padding-left:10px;
    padding-right:10px;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    width:100%;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div .btn{
    flex:1 1 0;
    min-width:0;
  }
}




/* =========================
  EDIT TRIP MODAL — MOBILE ALERT-SHEET STYLE
========================== */
@media (max-width: 820px){
  /* Backdrop behaves like Alerts / Help sheets */
  #trip-modal-backdrop{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
    background:rgba(0,0,0,.62) !important;
  }

  /* Sheet container */
  #trip-modal-backdrop .modal.trip-modal{
    width:100% !important;
    max-width:none !important;
    max-height:85vh !important;
    margin:0 !important;
    border-radius:18px 18px 0 0 !important;
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    box-shadow:0 -10px 40px rgba(0,0,0,.45) !important;
    animation:tripModalSheetUp .22s ease-out;
    overflow:hidden !important;
  }

  /* Header like the alert popup */
  #trip-modal-backdrop .trip-modal-top{
    position:sticky !important;
    top:0 !important;
    z-index:12 !important;
    padding:10px 16px 10px !important;
    background:inherit !important;
    border-bottom:1px solid rgba(148,163,184,.18) !important;
  }
  #trip-modal-backdrop .trip-modal-top::before{
    content:"";
    display:block;
    width:42px;
    height:5px;
    border-radius:999px;
    background:rgba(148,163,184,.45);
    margin:0 auto 10px;
  }
  #trip-modal-backdrop .trip-modal-top h3{
    font-size:1rem !important;
  }

  /* Body scroll area */
  #trip-modal-backdrop .trip-modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:10px 16px 12px !important;
  }

  /* Hide the old in-form action row entirely on mobile */
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    margin:12px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div{
    display:none !important;
  }

  /* Real bottom dock like an app sheet footer */
  #trip-modal-backdrop .trip-modal-footer-dock{
    display:block !important;
    flex:0 0 auto !important;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background:inherit !important;
    border-top:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 -8px 18px rgba(15,23,42,.14) !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display:flex !important;
    gap:8px !important;
    width:100% !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:44px !important;
  }

  /* Keep the moved card visually native */
  #trip-modal-backdrop .trip-modal-body #trip-form-card{
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .card-header{
    padding-top:0 !important;
  }
}

@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-body{
    padding:10px 14px 10px !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}

@keyframes tripModalSheetUp{
  from{
    transform:translateY(20px);
    opacity:.92;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}



@media (max-width: 820px){
  #trip-modal-backdrop .trip-modal-footer-dock{
    display:none;
    flex:0 0 auto;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background:inherit !important;
    border-top:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 -8px 18px rgba(15,23,42,.14) !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display:flex !important;
    gap:8px !important;
    width:100% !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div .btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    min-height:44px !important;
  }

  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer{
    margin:12px 0 0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:first-child{
    display:flex !important;
    flex-wrap:wrap;
    gap:6px !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .form-footer > div:last-child{
    display:none !important;
  }
}
@media (max-width: 560px){
  #trip-modal-backdrop .trip-modal-footer-dock{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div .btn{
    flex:1 1 0;
    min-width:0;
  }
}



/* Dock polish */
.trip-modal-footer-dock{
  box-shadow: 0 -6px 20px rgba(0,0,0,.25), 0 -1px 0 rgba(255,255,255,.04) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 820px){
  #trip-modal-backdrop .trip-modal-body{
    padding-bottom: 120px !important;
  }
}

/* Micro animations */
.command-center-panel,
.command-center-next-step,
.command-center-alert,
.exc-smart-badge{
  animation: ttFadeSlideIn .28s ease both;
}
.exc-smart-badge.no{
  animation: ttFadeSlideIn .28s ease both, ttWarnPulse 1.4s ease 1;
}
@keyframes ttFadeSlideIn{
  from{opacity:0; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes ttWarnPulse{
  0%{ box-shadow: 0 0 0 0 rgba(239,68,68,.34); }
  70%{ box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.command-center-weather-panel{
  animation: ttFadeSlideIn .32s ease both;
}
.command-center-weather-icon{
  font-size: 1.55rem;
  line-height: 1;
}



/* Command Center layout priority swap */
.command-center-insight-grid.command-center-insight-grid-priority{
  display:grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  grid-template-areas:
    "primary support"
    "weather weather";
  gap:12px;
  align-items:stretch;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-primary-panel{
  grid-area: primary;
  order:1;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-support-panel{
  grid-area: support;
  order:2;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-weather-panel{
  grid-area: weather;
  grid-column:1 / -1;
  grid-row:auto;
  align-self:stretch;
}

/* Hide Smart Alerts when there are no actionable items */
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support{
  grid-template-columns: 1fr;
  grid-template-areas:
    "primary"
    "weather";
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-primary-panel{
  grid-area: primary;
  grid-column: 1 / -1;
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-weather-panel{
  grid-area: weather;
  grid-column: 1 / -1;
}

@media (max-width: 900px){
  .command-center-insight-grid.command-center-insight-grid-priority{
    grid-template-columns: 1fr;
    grid-template-areas:
      "primary"
      "support"
      "weather";
  }
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-primary-panel,
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-support-panel,
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-weather-panel{
    grid-area:auto;
    grid-column:auto;
    grid-row:auto;
    order:initial;
  }
}



/* Command Center premium polish */
.command-center-weather-panel{
  min-height: 188px;
}
.command-center-weather-panel .command-center-weather-main{
  min-height: 54px;
}
.command-center-weather-panel .command-center-weather-stats{
  margin-top: 16px;
}
.command-center-support-panel .command-center-alert-list{
  margin-top: 10px;
}
.command-center-support-panel .command-center-alert.urgent,
.command-center-support-panel .command-center-due-soon.urgent{
  border-color: rgba(239,68,68,.28);
  box-shadow: 0 0 0 1px rgba(239,68,68,.10) inset, 0 6px 16px rgba(239,68,68,.08);
  background: linear-gradient(180deg, rgba(239,68,68,.08), rgba(239,68,68,.03));
}
.command-center-support-panel .command-center-alert.urgent strong,
.command-center-support-panel .command-center-alert.urgent{
  font-weight: 700;
}
.command-center-support-panel .command-center-health.urgent,
.command-center-support-panel .command-center-health.warn{
  box-shadow: 0 0 0 1px rgba(245,158,11,.10) inset;
}
@media (max-width: 900px){
  .command-center-weather-panel{
    min-height: 0;
  }
}


/* Command Center v2 */
.command-center-priority-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.command-center-priority-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.command-center-priority-top{
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
}
.command-center-priority-top.urgent,
.command-center-priority-alert.urgent,
.command-center-countdown-chip.urgent{
  box-shadow:0 0 0 1px rgba(255,120,120,.18), 0 0 24px rgba(255,120,120,.12);
  animation:commandCenterPulse 1.8s ease-in-out infinite;
}
.command-center-priority-top.warning,
.command-center-priority-alert.warning{
  box-shadow:0 0 0 1px rgba(255,200,120,.16);
}
.command-center-priority-port{
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.01em;
}
.command-center-priority-alert{
  margin-top:6px;
  font-size:.95rem;
  color:var(--muted);
}
.command-center-countdown-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.command-center-countdown-chip{
  min-width:140px;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid var(--line, rgba(255,255,255,.12));
  background:rgba(255,255,255,.035);
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.command-center-countdown-chip span{ font-size:.8rem; opacity:.8; }
.command-center-countdown-chip strong{ font-size:.95rem; }
.command-center-priority-middle{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.command-center-priority-row{
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
}
.command-center-priority-kicker{
  display:block;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.72;
  margin-bottom:4px;
}
.command-center-priority-main{
  font-size:1rem;
  font-weight:700;
}
.command-center-inline-countdown{
  display:inline-block;
  margin-left:8px;
  font-size:.82rem;
  font-weight:700;
  opacity:.85;
}
.command-center-priority-bottom{
  border-top:1px solid var(--line, rgba(255,255,255,.08));
  padding-top:10px;
}
.command-center-section-title{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.7;
  margin-bottom:8px;
}
.command-center-live-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.command-center-live-list-item{
  font-size:.96rem;
}
.command-center-tomorrow-preview{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line, rgba(255,255,255,.08));
  display:flex;
  flex-direction:column;
  gap:4px;
}
.command-center-tomorrow-preview span{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  opacity:.7;
}
.command-center-port-intelligence{
  border:1px solid var(--line, rgba(255,255,255,.10));
  border-radius:18px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
}
.command-center-port-visits{
  font-size:.78rem;
  font-weight:700;
  opacity:.78;
}
.command-center-port-title{
  font-size:1rem;
  font-weight:800;
  margin-top:4px;
}
.command-center-port-insight{
  margin-top:6px;
  color:var(--muted);
}
.command-center-port-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.command-center-port-list-item{
  font-size:.92rem;
}
.command-center-support-panel .command-center-alert.normal,
.command-center-support-panel .command-center-alert.info{
  opacity:.82;
}
@keyframes commandCenterPulse{
  0%, 100%{ transform:translateZ(0); }
  50%{ transform:translateY(-1px); }
}
body.light .command-center-priority-top,
body.light .command-center-priority-row,
body.light .command-center-countdown-chip,
body.light .command-center-port-intelligence{
  background:rgba(110,118,140,.04);
}


/* Command Center live polish */
.command-center-live-list-item.is-next{
  position:relative;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(99,102,241,.18);
  background:linear-gradient(180deg, rgba(99,102,241,.12), rgba(99,102,241,.04));
  box-shadow:0 0 0 1px rgba(99,102,241,.08) inset, 0 10px 24px rgba(99,102,241,.10);
}
.command-center-next-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(99,102,241,.16);
  color:var(--text, inherit);
  vertical-align:middle;
}
.command-center-empty.smart{
  border:1px dashed var(--line, rgba(255,255,255,.14));
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.025);
}
.command-center-weather-insight{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line, rgba(255,255,255,.08));
  font-size:.92rem;
  color:var(--muted);
}
body.light .command-center-live-list-item.is-next{
  background:linear-gradient(180deg, rgba(99,102,241,.08), rgba(99,102,241,.03));
}


/* Command Center: Today agenda time polish */
.command-center-today-agenda-list{
  gap:10px !important;
}
.command-center-today-agenda-item{
  line-height:1.35;
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
.command-center-today-agenda-item.is-past{
  opacity:.52;
  font-weight:500;
}
.command-center-today-agenda-item.is-upcoming{
  font-weight:800;
}
.command-center-today-agenda-item.is-next{
  opacity:1;
}
.command-center-agenda-line{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0;
}
.command-center-agenda-main{
  display:inline;
}
.command-center-today-time{
  font-weight:800;
  white-space:nowrap;
  opacity:.86;
}
.command-center-today-agenda-item.is-past .command-center-today-time{
  font-weight:700;
  opacity:.72;
}
.command-center-card-action-hint{
  margin-top:10px;
  font-size:.82rem;
  color:var(--muted);
}

/* Dashboard KPI compact paid-product layout patch */
#view-dashboard .dashboard-kpi-grid.compact-dashboard-kpis{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
#view-dashboard .compact-dashboard-kpis .kpi{
  min-height:88px;
  padding:10px 12px;
  border-radius:13px;
}
#view-dashboard .compact-dashboard-kpis .kpi::before{
  height:3px;
}
#view-dashboard .compact-dashboard-kpis .kpi-label{
  font-size:.66rem;
  letter-spacing:.12em;
  min-height:13px;
  margin-bottom:4px;
}
#view-dashboard .compact-dashboard-kpis .kpi-value{
  font-size:1.55rem;
  min-height:30px;
  line-height:1;
}
#view-dashboard .compact-dashboard-kpis .kpi-sub{
  font-size:.74rem;
  line-height:1.15;
  min-height:14px;
  margin-top:3px;
}
#view-dashboard .compact-dashboard-kpis .kpi-points-next{
  min-height:104px;
}
#view-dashboard .compact-dashboard-kpis .lat-tracker{
  margin-top:5px;
}
#view-dashboard .compact-dashboard-kpis .lat-tracker-row{
  font-size:.66rem;
  margin-bottom:3px;
}
#view-dashboard .compact-dashboard-kpis .lat-track{
  height:7px;
}
@media (max-width: 720px){
  #view-dashboard .dashboard-kpi-grid.compact-dashboard-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:9px;
  }
  #view-dashboard .compact-dashboard-kpis .kpi{
    min-height:84px;
    padding:9px 10px;
  }
  #view-dashboard .compact-dashboard-kpis .kpi-label{font-size:.62rem;}
  #view-dashboard .compact-dashboard-kpis .kpi-value{font-size:1.35rem; min-height:26px;}
  #view-dashboard .compact-dashboard-kpis .kpi-sub{font-size:.7rem;}
}

/* =========================================================
   GLOBAL CARD RHYTHM PASS — compact, premium, consistent
   Keeps the new Dashboard KPI feel across Dashboard, Command Center,
   Cruise Log, Ships, Port rows, agenda cards, and route cards.
========================================================= */
:root{
  --tt-card-radius: 14px;
  --tt-card-radius-lg: 18px;
  --tt-card-pad: 12px 14px;
  --tt-card-pad-sm: 10px 12px;
  --tt-card-gap: 10px;
  --tt-card-line: rgba(148,163,184,.24);
  --tt-card-shadow: 0 8px 22px rgba(15,23,42,.08);
  --tt-card-shadow-hover: 0 12px 28px rgba(15,23,42,.12);
}
body:not(.light){
  --tt-card-line: rgba(148,163,184,.20);
  --tt-card-shadow: 0 10px 24px rgba(0,0,0,.28);
  --tt-card-shadow-hover: 0 14px 30px rgba(0,0,0,.34);
}

/* Shared app-card surface */
.kpi,
.ports-stat,
.ships-panel,
.command-center-card,
.command-center-panel,
.cc-meta-item,
.command-center-next-step,
.agenda-day-card,
.route-timeline-card,
.port-journal-card,
.ports-leaderboard,
.port-stat-row{
  border-radius: var(--tt-card-radius) !important;
  border-color: var(--tt-card-line) !important;
  box-shadow: var(--tt-card-shadow) !important;
}

/* Compact rhythm inside cards */
.kpi,
.ports-stat,
.command-center-panel,
.cc-meta-item,
.agenda-day-card,
.route-timeline-card,
.port-journal-card,
.ports-leaderboard{
  padding: var(--tt-card-pad) !important;
}

.command-center-card,
.ships-panel{
  border-radius: var(--tt-card-radius-lg) !important;
  padding: 16px !important;
}

/* Consistent top accent treatment */
.kpi::before,
.ports-stat::before,
.command-center-card::before{
  height: 3px !important;
  background: linear-gradient(90deg, #38bdf8, #a855f7) !important;
  opacity: .9 !important;
}

/* Header rhythm */
.kpi-label,
.ports-stat-label,
.ships-panel-title,
.command-center-kicker,
.command-center-panel h3,
.port-journal-title,
.ports-leaderboard-title,
.command-center-section-title{
  font-size: .68rem !important;
  line-height: 1.1 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  margin-bottom: 6px !important;
}

/* Number / main value rhythm */
.kpi-value,
.ports-stat-kpi-value,
.ports-stat-value,
.ships-panel-count{
  line-height: 1.02 !important;
  letter-spacing: -.03em !important;
  font-weight: 850 !important;
}

/* Supporting text rhythm */
.kpi-sub,
.ports-stat-sub,
.ships-panel-sub,
.port-stat-sub,
.port-stat-timeline,
.command-center-empty,
.command-center-next-step .muted{
  font-size: .74rem !important;
  line-height: 1.25 !important;
}

/* Dashboard KPIs keep the new tight paid-product layout */
#view-dashboard .kpi-grid,
#view-dashboard .dashboard-kpi-grid.compact-dashboard-kpis{
  gap: 10px !important;
}
#view-dashboard .kpi,
#view-dashboard .compact-dashboard-kpis .kpi{
  min-height: 86px !important;
  padding: 10px 12px !important;
}
#view-dashboard .kpi-value,
#view-dashboard .compact-dashboard-kpis .kpi-value{
  font-size: 1.55rem !important;
  min-height: 28px !important;
}
#view-dashboard .kpi-sub,
#view-dashboard .compact-dashboard-kpis .kpi-sub{
  min-height: 14px !important;
}

/* Command Center: tighter card rhythm without changing layout */
.command-center-card{
  margin-top: 24px !important;
}
.command-center-meta,
.command-center-details,
.command-center-smart,
.command-center-insight-grid.command-center-insight-grid-priority{
  gap: var(--tt-card-gap) !important;
}
.command-center-panel{
  min-height: 0;
}
.command-center-primary-panel,
.command-center-support-panel,
.command-center-weather-panel{
  background: rgba(255,255,255,.045);
}
body.light .command-center-primary-panel,
body.light .command-center-support-panel,
body.light .command-center-weather-panel{
  background: rgba(255,255,255,.62);
}
.command-center-priority-row,
.command-center-priority-top,
.command-center-port-intelligence,
.command-center-weather-stats div,
.command-center-live-list-item.is-next{
  border-radius: 12px !important;
}
.command-center-live-list,
.command-center-today-list,
.command-center-alert-list{
  gap: 7px !important;
}
.command-center-next-step{
  margin-top: 10px !important;
}

/* Cruise Log: compact analytics cards + cleaner port list */
.ports-stats-grid{
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.ports-stat{
  min-height: 0 !important;
}
.ports-stat-kpi{
  min-height: 112px !important;
  gap: 6px !important;
}
.ports-stat-kpi-value{
  font-size: 2rem !important;
}
.ports-stat-kpi-text{
  font-size: 1.45rem !important;
  line-height: 1.05 !important;
}
.ports-stat-achievements-card,
.ports-stat-top5-card{
  min-height: 136px !important;
}
.ports-top5-list,
.ports-achievements-list{
  margin-top: 8px !important;
  gap: 7px !important;
}
.ports-top5-item{
  gap: 8px !important;
}
.ports-top5-bar{
  height: 8px !important;
}
.ships-panel{
  top: 8px !important;
}
.ships-panel-list{
  gap: 5px !important;
}
.port-stat-row{
  margin-bottom: 8px !important;
  background: var(--row-bg) !important;
}
.port-stat-summary{
  padding: 9px 12px !important;
}
.port-stat-name{
  font-size: .94rem !important;
  line-height: 1.18 !important;
}
.port-stat-trips{
  padding: 9px 12px 11px !important;
}

/* Subtle product feel on desktop only */
@media (hover:hover) and (pointer:fine){
  .kpi,
  .ports-stat,
  .command-center-panel,
  .ships-panel,
  .port-stat-row,
  .agenda-day-card,
  .route-timeline-card{
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .kpi:hover,
  .ports-stat:hover,
  .command-center-panel:hover,
  .ships-panel:hover,
  .port-stat-row:hover,
  .agenda-day-card:hover,
  .route-timeline-card:hover{
    transform: translateY(-1px);
    box-shadow: var(--tt-card-shadow-hover) !important;
  }
}

/* Mobile: tighter but still tappable */
@media (max-width: 720px){
  :root{ --tt-card-pad: 10px 12px; --tt-card-gap: 9px; }
  .command-center-card,
  .ships-panel{ padding: 14px !important; }
  #view-dashboard .kpi,
  #view-dashboard .compact-dashboard-kpis .kpi{
    min-height: 82px !important;
    padding: 9px 10px !important;
  }
  #view-dashboard .kpi-value,
  #view-dashboard .compact-dashboard-kpis .kpi-value{
    font-size: 1.35rem !important;
  }
  .ports-stat-kpi{ min-height: 96px !important; }
  .ports-stat-kpi-value{ font-size: 1.7rem !important; }
  .ports-stat-kpi-text{ font-size: 1.25rem !important; }
  .port-stat-summary{ padding: 10px 12px !important; }
}

/* Trips tab compact icon guide — grouped + interactive polish */
.trip-meta-help-btn.needs-attention{
  color:#0ea5e9;
  border-color:rgba(14,165,233,.65);
  background:rgba(14,165,233,.10);
  box-shadow:0 0 0 3px rgba(14,165,233,.10), 0 4px 12px rgba(15,23,42,.10);
}
.trip-meta-help-body{
  display:grid;
  gap:10px;
}
.trip-meta-help-group{
  border:1px solid rgba(148,163,184,.24);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.42);
}
.trip-meta-help-group h4{
  margin:0 0 8px;
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.trip-meta-guide-row{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  width:100%;
  display:grid;
  grid-template-columns:minmax(120px,.75fr) minmax(0,1fr);
  gap:10px;
  align-items:start;
  text-align:left;
  padding:7px 8px;
  border-radius:10px;
  cursor:pointer;
}
.trip-meta-guide-row strong{
  font-size:.84rem;
  color:var(--text);
}
.trip-meta-guide-row span{
  font-size:.78rem;
  color:var(--muted);
  line-height:1.35;
}
.trip-meta-guide-row:hover,
.trip-meta-guide-row:focus-visible,
.trip-meta-guide-row.trip-meta-guide-highlight,
.trip-meta-guide-row.trip-meta-guide-active{
  background:rgba(14,165,233,.10);
  outline:0;
}
.trip-meta-guide-row.trip-meta-guide-active{
  box-shadow:inset 3px 0 0 var(--accent);
}
.trip-meta [data-trip-meta-key].trip-meta-guide-highlight,
.trip-meta [data-trip-meta-key].trip-meta-guide-active{
  background:rgba(14,165,233,.12);
  color:var(--text);
  border-radius:999px;
  padding:2px 6px;
  margin:-2px -6px;
  box-shadow:0 0 0 1px rgba(14,165,233,.25), 0 4px 12px rgba(14,165,233,.12);
}
.trip-meta [data-trip-meta-key].trip-meta-guide-active{
  box-shadow:0 0 0 2px rgba(14,165,233,.28), 0 6px 16px rgba(14,165,233,.18);
}
@media (max-width: 640px){
  .trip-meta-guide-row{
    grid-template-columns:1fr;
    gap:2px;
  }
}


/* Dashboard customization: clean direct edit mode */
.dashboard-overview-header{
  align-items:flex-start;
  gap:12px;
}
.dashboard-edit-btn{
  white-space:nowrap;
  padding:7px 10px;
  font-size:.82rem;
}
.dashboard-edit-hint{
  color:var(--muted);
  font-size:.78rem;
  margin-top:2px;
}
.dashboard-card-controls{
  margin:2px 0 12px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card-soft, rgba(148,163,184,.08));
}
.dashboard-card-controls-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  font-size:.82rem;
  font-weight:800;
  color:var(--text);
}
.dashboard-restore-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.dashboard-restore-card-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card-bg, rgba(255,255,255,.75));
  color:var(--text);
  padding:6px 10px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}
.dashboard-restore-card-btn:hover{
  border-color:rgba(14,165,233,.42);
  box-shadow:0 6px 14px rgba(14,165,233,.12);
}
.dashboard-edit-mode .dashboard-kpi-grid .kpi{
  position:relative;
  outline:1px dashed rgba(59,130,246,.38);
  outline-offset:2px;
}
.dashboard-hide-card-btn{
  position:absolute;
  top:7px;
  right:7px;
  width:26px;
  height:26px;
  border:1px solid var(--border);
  background:var(--card-bg, rgba(255,255,255,.9));
  color:var(--muted);
  border-radius:999px;
  padding:0;
  font-size:1rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
}
.dashboard-hide-card-btn:hover{
  color:#ef4444;
  border-color:rgba(239,68,68,.38);
  background:rgba(239,68,68,.08);
}
.dashboard-edit-mode .dashboard-hide-card-btn{
  display:inline-flex;
}
.dashboard-kpi-hidden{
  display:none !important;
}
@media (max-width:760px){
  .dashboard-overview-header{ align-items:stretch; }
  .dashboard-edit-btn{ width:100%; justify-content:center; }
}


/* ===== Cruise Log route controls: bottom map toolbar ===== */
.ports-map-wrap{
  position: relative;
}
.ports-route-map-toolbar{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  z-index:760;
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.36);
  background:rgba(15,23,42,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(2,6,23,.24);
  pointer-events:auto;
}
.ports-route-map-toolbar.is-visible{
  display:flex;
}
.ports-route-map-toolbar .route-pill-btn{
  min-width:72px;
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.92);
  color:#0f172a;
}
body.light .ports-route-map-toolbar{
  background:rgba(255,255,255,.86);
  border-color:rgba(148,163,184,.42);
  box-shadow:0 14px 34px rgba(15,23,42,.14);
}
body.light .ports-route-map-toolbar .route-pill-btn{
  background:rgba(255,255,255,.98);
  border-color:rgba(148,163,184,.45);
}
@media (max-width:640px){
  .ports-route-map-toolbar{
    left:10px;
    right:10px;
    bottom:10px;
    transform:none;
    border-radius:18px;
  }
  .ports-route-map-toolbar .route-pill-btn{
    flex:1 1 0;
    min-width:0;
    padding:8px 10px;
  }
}

/* =========================
  POLISH PASS — Modal + Form System
  Makes popups and forms match the compact premium dashboard rhythm.
========================== */
:root{
  --modal-radius: 22px;
  --modal-pad: 18px;
  --field-radius: 12px;
  --field-h: 38px;
  --modal-glass: rgba(2, 6, 23, .72);
  --modal-line: rgba(148, 163, 184, .20);
}
body.light{
  --modal-glass: rgba(248, 250, 252, .72);
  --modal-line: rgba(148, 163, 184, .32);
}

/* Backdrops feel like one system */
.modal-backdrop,
.status-help-overlay,
.trip-advisor-backdrop,
.install-help-backdrop{
  background: rgba(2, 6, 23, .58) !important;
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}

/* Core modal shell polish */
.modal,
.modal.trip-modal,
.status-help-modal,
.trip-meta-help-modal,
.copy-modal,
.trip-advisor-modal,
.install-help-modal,
.help-modal{
  border-radius: var(--modal-radius) !important;
  border: 1px solid var(--card-border) !important;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.10), transparent 46%),
    radial-gradient(circle at bottom right, rgba(168,85,247,.10), transparent 48%),
    var(--surface-2) !important;
  box-shadow: 0 28px 80px rgba(2, 6, 23, .38), 0 1px 0 rgba(255,255,255,.06) inset !important;
  overflow: hidden;
}
body.light .modal,
body.light .modal.trip-modal,
body.light .status-help-modal,
body.light .trip-meta-help-modal,
body.light .copy-modal,
body.light .trip-advisor-modal,
body.light .install-help-modal,
body.light .help-modal{
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 46%),
    radial-gradient(circle at bottom right, rgba(168,85,247,.08), transparent 48%),
    rgba(255,255,255,.96) !important;
  box-shadow: 0 28px 75px rgba(15, 23, 42, .20), 0 1px 0 rgba(255,255,255,.8) inset !important;
}

/* Modal headers: compact, sticky, dashboard-like */
.trip-modal-top,
.status-help-header,
.trip-advisor-top,
.install-help-top{
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--modal-line) !important;
  background:
    linear-gradient(180deg, rgba(2,6,23,.94), rgba(2,6,23,.82)) !important;
}
body.light .trip-modal-top,
body.light .status-help-header,
body.light .trip-advisor-top,
body.light .install-help-top{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90)) !important;
}
.trip-modal-top h3,
.status-help-header h3,
.trip-advisor-top h3,
.install-help-top h3,
.modal h3,
.copy-modal h3{
  font-size: .98rem !important;
  letter-spacing: .01em;
  line-height: 1.15;
}

/* Universal close buttons */
.trip-modal-top .btn,
.status-help-close,
.trip-advisor-top .btn,
.install-help-top .btn,
.modal .close,
button[aria-label="Close"]{
  min-width: 34px;
  min-height: 34px;
  border-radius: 999px !important;
  border: 1px solid var(--surface-border) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 18px rgba(2,6,23,.10);
}

/* Forms: same compact rhythm everywhere */
input,
textarea,
select{
  min-height: var(--field-h);
  border-radius: var(--field-radius) !important;
  border: 1px solid var(--surface-border) !important;
  background: var(--input-bg) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
input:hover,
textarea:hover,
select:hover{
  border-color: rgba(56,189,248,.45) !important;
}
input:focus,
textarea:focus,
select:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.18), 0 1px 0 rgba(255,255,255,.08) inset !important;
}
label{
  font-weight: 650;
  letter-spacing: .01em;
}
.field{ gap: 5px; }
.field-row{ gap: 10px; }

/* Modal body panels */
.trip-modal-body,
.status-help-body,
.trip-advisor-body,
.install-help-body{
  padding: 16px !important;
}
.trip-modal-body #trip-form-card .card-header{
  padding: 10px 0 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--modal-line) !important;
}
.trip-modal-body #trip-form-card .card-header h2,
.trip-advisor-kicker,
.install-help-kicker{
  letter-spacing: .13em !important;
  text-transform: uppercase;
  color: var(--text);
}
.trip-modal-body #trip-form-card .card-header small,
.trip-advisor-meta,
.install-help-note,
.status-help-note{
  color: var(--muted) !important;
}

/* Trip form sections feel like soft app panels */
.trip-modal-body #ports-list,
.trip-modal-body .ports-list,
.trip-modal-body .addon-toggle,
.trip-modal-body .port-row,
.trip-modal-body .doc-row,
.trip-modal-body .planner-doc-item,
.trip-modal-body .planner-docs-upload,
.trip-modal-body .form-footer{
  border-radius: 16px !important;
}
.trip-modal-body #ports-list,
.trip-modal-body .ports-list,
.trip-modal-body .planner-docs-upload{
  border: 1px solid var(--modal-line) !important;
  background: rgba(148,163,184,.08) !important;
}
body.light .trip-modal-body #ports-list,
body.light .trip-modal-body .ports-list,
body.light .trip-modal-body .planner-docs-upload{
  background: rgba(241,245,249,.70) !important;
}

/* Sticky footer dock matches the dashboard chip/button language */
.trip-modal-body .form-footer,
#trip-modal-backdrop .trip-modal-footer-dock{
  border-top: 1px solid var(--modal-line) !important;
  background:
    linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.88) 28%, rgba(2,6,23,.96)) !important;
}
body.light .trip-modal-body .form-footer,
body.light #trip-modal-backdrop .trip-modal-footer-dock{
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.88) 28%, rgba(255,255,255,.97)) !important;
}

/* Buttons in modals/forms get a premium touch without changing behavior */
.modal .btn,
.trip-modal .btn,
.status-help-modal .btn,
.copy-modal .btn,
.trip-advisor-modal .btn,
.install-help-modal .btn,
.trip-planner .btn,
.agenda-item .btn{
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px !important;
  font-weight: 650;
}
.modal .btn:hover,
.trip-modal .btn:hover,
.status-help-modal .btn:hover,
.copy-modal .btn:hover,
.trip-advisor-modal .btn:hover,
.install-help-modal .btn:hover,
.trip-planner .btn:hover,
.agenda-item .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}
.modal .btn:active,
.trip-modal .btn:active,
.status-help-modal .btn:active,
.copy-modal .btn:active,
.trip-advisor-modal .btn:active,
.install-help-modal .btn:active,
.trip-planner .btn:active,
.agenda-item .btn:active{
  transform: translateY(0);
}
.btn-primary,
.trip-modal .btn-primary,
.modal .btn-primary{
  box-shadow: 0 10px 24px rgba(14,165,233,.28) !important;
}

/* Inline edit forms should feel connected to the card system */
.ag-editform,
.exc-edit-grid,
.agenda-item.is-editing .ag-editform{
  border-radius: 16px !important;
  border: 1px solid var(--modal-line) !important;
  background: rgba(148,163,184,.07) !important;
}
body.light .ag-editform,
body.light .exc-edit-grid,
body.light .agenda-item.is-editing .ag-editform{
  background: rgba(241,245,249,.70) !important;
}

/* Alert/help style lists */
.status-help-item,
.trip-advisor-message,
.install-help-steps,
.alert-item{
  border-radius: 16px !important;
  border-color: var(--modal-line) !important;
}

/* Mobile: forms stay finger-friendly and modal feels native */
@media (max-width: 640px){
  .modal-backdrop,
  .status-help-overlay,
  .trip-advisor-backdrop,
  .install-help-backdrop{
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
    align-items: flex-start !important;
  }
  .modal,
  .modal.trip-modal,
  .status-help-modal,
  .trip-meta-help-modal,
  .copy-modal,
  .trip-advisor-modal,
  .install-help-modal{
    width: 100% !important;
    max-width: none !important;
    border-radius: 18px !important;
  }
  .trip-modal-body,
  .status-help-body,
  .trip-advisor-body,
  .install-help-body{
    padding: 12px !important;
  }
  input, textarea, select{
    min-height: 42px;
    font-size: 16px; /* prevents iOS zoom */
  }
  .field-row{ gap: 8px; }
}

/* =========================
   EDIT TRIP MOBILE COMPACT FORM PATCH
   Tightens Add/Edit Trip sheet spacing without losing the premium style.
========================== */
@media (max-width: 640px){
  /* Keep the sheet premium, but let more form fit on screen */
  #trip-modal-backdrop .modal.trip-modal{
    max-height: 88svh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  #trip-modal-backdrop .trip-modal-top{
    padding: 8px 14px 8px !important;
    min-height: 54px !important;
  }
  #trip-modal-backdrop .trip-modal-top::before{
    width: 38px !important;
    height: 4px !important;
    margin-bottom: 7px !important;
  }
  #trip-modal-backdrop .trip-modal-top h3{
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  #trip-modal-backdrop .trip-modal-body{
    padding: 8px 14px 8px !important;
  }

  /* Compact the form rhythm */
  #trip-modal-backdrop .trip-modal-body #trip-form-card form{
    gap: 8px !important;
    margin-top: 0 !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .field-row,
  #trip-modal-backdrop .trip-modal-body #trip-form-card .row{
    gap: 8px !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .field{
    gap: 3px !important;
    margin: 0 !important;
  }

  /* Labels closer to controls */
  #trip-modal-backdrop .trip-modal-body #trip-form-card label{
    font-size: .78rem !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    letter-spacing: .01em !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card small,
  #trip-modal-backdrop .trip-modal-body #trip-form-card .hint,
  #trip-modal-backdrop .trip-modal-body #trip-form-card .muted{
    line-height: 1.22 !important;
    margin-top: 2px !important;
  }

  /* Mobile-friendly, but not oversized */
  #trip-modal-backdrop .trip-modal-body #trip-form-card input,
  #trip-modal-backdrop .trip-modal-body #trip-form-card select,
  #trip-modal-backdrop .trip-modal-body #trip-form-card textarea{
    min-height: 46px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card textarea{
    min-height: 72px !important;
  }

  /* Less dead space around helper panels/sections */
  #trip-modal-backdrop .trip-modal-body #trip-form-card .card-header{
    padding: 4px 0 8px !important;
    margin-bottom: 8px !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card .ports-list,
  #trip-modal-backdrop .trip-modal-body #trip-form-card #ports-list,
  #trip-modal-backdrop .trip-modal-body #trip-form-card .planner-docs-upload,
  #trip-modal-backdrop .trip-modal-body #trip-form-card .agenda-day-card,
  #trip-modal-backdrop .trip-modal-body #trip-form-card .daily-agenda-card{
    padding: 10px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    border-radius: 14px !important;
  }

  /* Compact checkboxes/toggles inside edit trip */
  #trip-modal-backdrop .trip-modal-body #trip-form-card input[type="checkbox"]{
    min-height: 0 !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
  }

  /* Bottom dock stays reachable but not bulky */
  #trip-modal-backdrop .trip-modal-footer-dock{
    padding: 8px 14px calc(9px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock > div{
    gap: 8px !important;
  }
  #trip-modal-backdrop .trip-modal-footer-dock .btn{
    min-height: 44px !important;
    padding: 8px 12px !important;
  }
}

@media (max-width: 390px){
  #trip-modal-backdrop .trip-modal-body{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card form{
    gap: 7px !important;
  }
  #trip-modal-backdrop .trip-modal-body #trip-form-card input,
  #trip-modal-backdrop .trip-modal-body #trip-form-card select,
  #trip-modal-backdrop .trip-modal-body #trip-form-card textarea{
    min-height: 44px !important;
    padding: 8px 11px !important;
  }
}

/* === MOBILE FORM + PLANNER COMPACT POLISH V2 === */
.trip-form-section{
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  padding:14px;
  margin:0 0 14px;
  background:linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
}
.trip-form-section-title{
  margin:0 0 10px;
  font-size:.78rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:900;
  color:var(--muted, #64748b);
}
body.dark .trip-form-section{
  background:linear-gradient(135deg, rgba(15,23,42,.74), rgba(15,23,42,.48));
  border-color:rgba(148,163,184,.22);
}

@media (max-width: 820px){
  .trip-modal .trip-form-section{
    border-radius:14px;
    padding:10px 10px 12px;
    margin:0 0 10px;
  }
  .trip-modal .trip-form-section-title{
    margin-bottom:8px;
    font-size:.68rem;
    letter-spacing:.14em;
  }
  .trip-modal .field-row,
  .trip-modal .row{
    gap:10px !important;
  }
  .trip-modal .field{
    margin-bottom:8px !important;
  }
  .trip-modal .field label{
    margin-bottom:4px !important;
    font-size:.9rem;
  }
  .trip-modal input,
  .trip-modal select,
  .trip-modal textarea{
    min-height:46px !important;
  }
  .trip-modal textarea{
    min-height:88px !important;
  }

  .trip-planner .planner-sections{
    gap:10px !important;
  }
  .trip-planner .planner-section{
    padding:10px !important;
    border-radius:14px !important;
  }
  .trip-planner .planner-section h4{
    margin:0 0 8px !important;
    font-size:.76rem !important;
    letter-spacing:.14em;
    text-transform:uppercase;
  }
  .trip-planner .planner-add,
  .trip-planner .planner-docs-upload{
    gap:8px !important;
    align-items:center;
  }
  .trip-planner .planner-add input,
  .trip-planner .planner-add select,
  .trip-planner .planner-docs-upload input,
  .trip-planner .planner-docs-upload select{
    min-height:38px !important;
    padding:8px 10px !important;
    font-size:.92rem !important;
  }
  .trip-planner .planner-add .btn,
  .trip-planner .planner-docs-upload .btn{
    min-height:38px !important;
    padding:8px 12px !important;
  }
  .planner-row{
    padding:8px 10px !important;
    border-radius:12px !important;
  }
  .planner-list{
    gap:7px !important;
  }
  .planner-mini-note{
    margin-top:6px !important;
  }
}

/* ===============================
   Header polish: clean 2-row control layout
   =============================== */
.header-actions{
  gap:8px !important;
}
.header-actions .tabs{
  margin-top:0;
}
.header-action-bar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  width:fit-content;
  max-width:100%;
}
.header-action-group{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}
.header-action-bar .btn,
.header-action-bar .pill-link{
  min-height:28px;
  padding:5px 11px;
  line-height:1.1;
  white-space:nowrap;
}
.header-action-group-primary{ order:1; }
.header-action-group:not(.header-action-group-primary):not(.header-action-group-system){ order:2; }
.header-action-group-system{ order:3; }
@media (max-width:900px){
  .header-action-bar{
    justify-content:flex-end;
    gap:8px;
  }
  .header-action-group{ gap:5px; }
}
@media (max-width:768px){
  .header-action-bar{ display:none !important; }
}

/* ===============================
   Header dropdown menu parity
   Desktop now uses the same simple More/User pattern as mobile.
   =============================== */
.header-action-bar{
  display:none !important;
}
.tabs .desktop-more-btn,
.tabs .desktop-user-btn{
  white-space:nowrap;
}
@media (min-width:641px){
  .mobile-more-backdrop{
    align-items:flex-start;
    justify-content:flex-end;
    padding:96px max(24px, calc((100vw - 1180px) / 2 + 24px)) 24px 24px;
    background: rgba(2,6,23,.24);
  }
  .mobile-more-sheet{
    width:min(420px, calc(100vw - 48px));
    border-radius:22px;
    box-shadow:0 22px 70px rgba(15,23,42,.28);
  }
  .mobile-more-title::after{
    content:" menu";
    font-weight:600;
    color:var(--muted);
  }
  .mobile-more-foot small{
    display:none;
  }
}


/* Grouped More menu sections */
.mobile-more-sections{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mobile-more-section{
  border-top:1px solid rgba(148,163,184,.18);
  padding-top:12px;
}
.mobile-more-section:first-child{
  border-top:0;
  padding-top:0;
}
.mobile-more-section-title{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 8px;
}
.mobile-more-section .mobile-more-grid{
  margin:0;
}
.mobile-more-section .mobile-more-grid .btn{
  justify-content:center;
}

/* Dashboard overview inline customize pencil */
.dashboard-overview-header{
  align-items:flex-start;
  gap:12px;
}
.dashboard-overview-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
}
.dashboard-edit-icon{
  appearance:none;
  border:1px solid rgba(148,163,184,.38);
  background:rgba(255,255,255,.68);
  color:var(--text);
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.dashboard-edit-icon:hover{
  transform:translateY(-1px) scale(1.04);
  border-color:rgba(56,189,248,.55);
  background:rgba(240,249,255,.92);
  box-shadow:0 10px 22px rgba(56,189,248,.18);
}
.dashboard-edit-icon[aria-pressed="true"]{
  background:linear-gradient(135deg,#38bdf8,#a855f7);
  color:#fff;
  border-color:transparent;
}
@media (max-width:760px){
  .dashboard-overview-header{ align-items:flex-start !important; }
  .dashboard-overview-title{ gap:7px; }
  .dashboard-edit-icon{ width:28px; height:28px; font-size:.82rem; }
}

/* =========================================================
   CRUISE LOG CARD MATCH PASS — align Cruise Log cards with
   the compact Dashboard KPI card rhythm
========================================================= */
#view-ports .ports-stats-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}
#view-ports .ports-stat{
  position:relative !important;
  overflow:hidden !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.62)) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
}
body:not(.light) #view-ports .ports-stat{
  background:linear-gradient(135deg,rgba(15,23,42,.88),rgba(15,23,42,.68)) !important;
  border-color:rgba(148,163,184,.22) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}
#view-ports .ports-stat::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:3px !important;
  background:linear-gradient(90deg,#38bdf8,#a855f7) !important;
  opacity:.95 !important;
}
#view-ports .ports-stat-kpi{
  min-height:86px !important;
  padding:10px 12px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:4px !important;
}
#view-ports .ports-stat-icon{
  position:absolute !important;
  top:11px !important;
  right:12px !important;
  width:22px !important;
  height:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:rgba(56,189,248,.08) !important;
  opacity:.78 !important;
  font-size:.9rem !important;
}
#view-ports .ports-stat-kpi-label,
#view-ports .ports-stat-label{
  order:1 !important;
  font-size:.68rem !important;
  line-height:1.1 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  color:var(--muted) !important;
  margin:0 28px 4px 0 !important;
}
#view-ports .ports-stat-kpi-value,
#view-ports .ports-stat-value{
  order:2 !important;
  font-size:1.55rem !important;
  min-height:28px !important;
  line-height:1.02 !important;
  letter-spacing:-.03em !important;
  font-weight:850 !important;
  margin:0 !important;
}
#view-ports .ports-stat-kpi-text{
  order:2 !important;
  font-size:1.35rem !important;
  min-height:28px !important;
  line-height:1.05 !important;
  letter-spacing:-.03em !important;
  font-weight:850 !important;
  margin:0 !important;
}
#view-ports .ports-stat-sub{
  order:3 !important;
  font-size:.74rem !important;
  line-height:1.25 !important;
  color:var(--muted) !important;
  margin-top:1px !important;
}
#view-ports .ports-stat-achievements-card,
#view-ports .ports-stat-top5-card,
#view-ports .years-card,
#view-ports .ships-panel{
  padding:12px 14px !important;
}
#view-ports .ports-stat-achievements-card,
#view-ports .ports-stat-top5-card{
  min-height:112px !important;
}
#view-ports .years-card,
#view-ports .ships-panel{
  margin-top:10px !important;
}
#view-ports .ports-top5-bar{
  height:7px !important;
  border-radius:999px !important;
}
#view-ports .port-stat-row{
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.24) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.07) !important;
}
@media (max-width:720px){
  #view-ports .ports-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  #view-ports .ports-stat-kpi{
    min-height:82px !important;
    padding:9px 10px !important;
  }
  #view-ports .ports-stat-kpi-value,
  #view-ports .ports-stat-value{
    font-size:1.35rem !important;
  }
  #view-ports .ports-stat-kpi-text{
    font-size:1.18rem !important;
  }
  #view-ports .ports-stat-icon{
    top:10px !important;
    right:10px !important;
  }
}

/* Cruise Log status layout: Dashboard-style ordering */
#view-ports .status-row-kpis{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}
#view-ports .status-row-story{
  display:grid !important;
  grid-template-columns:minmax(220px, .82fr) minmax(0, 1.55fr) !important;
  gap:10px !important;
  align-items:stretch !important;
}
#view-ports .status-row-story .ports-stat{
  min-height:112px !important;
}
#view-ports .ports-stat-most-visited-card{
  padding:12px 14px !important;
}
#view-ports .ports-stat-sailing-timeline-card{
  margin-top:0 !important;
}
#view-ports .status-row-insights{
  grid-template-columns:minmax(220px, .82fr) minmax(0, 1.55fr) !important;
}
@media (max-width: 760px){
  #view-ports .status-row-kpis,
  #view-ports .status-row-story,
  #view-ports .status-row-insights{
    grid-template-columns:1fr !important;
  }
}

/* Cruise Log: align Status rows to the same 3-column grid as Dashboard KPIs */
#view-ports .status-row-kpis,
#view-ports .status-row-story,
#view-ports .status-row-insights{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}
#view-ports .status-row-story .ports-stat-most-visited-card,
#view-ports .status-row-insights .ports-stat-achievements-card{
  grid-column: 1 / span 1 !important;
}
#view-ports .status-row-story .ports-stat-sailing-timeline-card,
#view-ports .status-row-insights .ports-stat-top5-card{
  grid-column: 2 / span 2 !important;
}
#view-ports .status-row-story .ports-stat,
#view-ports .status-row-insights .ports-stat{
  width: auto !important;
  min-width: 0 !important;
}
@media (max-width: 760px){
  #view-ports .status-row-kpis,
  #view-ports .status-row-story,
  #view-ports .status-row-insights{
    grid-template-columns: 1fr !important;
  }
  #view-ports .status-row-story .ports-stat-most-visited-card,
  #view-ports .status-row-story .ports-stat-sailing-timeline-card,
  #view-ports .status-row-insights .ports-stat-achievements-card,
  #view-ports .status-row-insights .ports-stat-top5-card{
    grid-column: auto !important;
  }
}

/* Cruise Log: remove redundant Achievements card and let Top 5 own the row */
#view-ports .status-row-top5-only{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
#view-ports .status-row-top5-only .ports-stat-top5-card,
#view-ports .ports-stat-top5-card--full{
  grid-column: 1 / -1 !important;
}
@media (max-width: 760px){
  #view-ports .status-row-top5-only .ports-stat-top5-card,
  #view-ports .ports-stat-top5-card--full{
    grid-column: auto !important;
  }
}

/* Cruise Log: swap Top 5 ports and Sailing Timeline rows */
#view-ports .status-row-story .ports-stat-most-visited-card{
  grid-column: 1 / span 1 !important;
}
#view-ports .status-row-story .ports-stat-top5-card--wide{
  grid-column: 2 / span 2 !important;
}
#view-ports .status-row-years-only{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#view-ports .status-row-years-only .ports-stat-sailing-timeline-card--full{
  grid-column: 1 / -1 !important;
}
#view-ports .status-row-years-only .ports-stat-sailing-timeline-card--full .ships-years-list{
  width: 100%;
}
@media (max-width: 760px){
  #view-ports .status-row-story .ports-stat-most-visited-card,
  #view-ports .status-row-story .ports-stat-top5-card--wide,
  #view-ports .status-row-years-only .ports-stat-sailing-timeline-card--full{
    grid-column: auto !important;
  }
  #view-ports .status-row-years-only{
    grid-template-columns: 1fr !important;
  }
}

/* Cruise Log spacing fix: lock Most Visited + Top 5 into one aligned row */
#view-ports .status-dashboard{
  gap: 12px !important;
}
#view-ports .status-row-story{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  grid-auto-flow: row !important;
}
#view-ports .status-row-story .ports-stat-most-visited-card{
  grid-column: 1 / span 1 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  margin: 0 !important;
}
#view-ports .status-row-story .ports-stat-top5-card--wide{
  grid-column: 2 / span 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  margin: 0 !important;
}
#view-ports .status-row-story .ports-stat-most-visited-card,
#view-ports .status-row-story .ports-stat-top5-card--wide{
  min-height: 132px !important;
}
#view-ports .status-row-years-only{
  margin-top: 0 !important;
}
#view-ports .status-row-years-only .ports-stat-sailing-timeline-card--full{
  margin: 0 !important;
}
@media (max-width: 760px){
  #view-ports .status-row-story{
    grid-template-columns: 1fr !important;
  }
  #view-ports .status-row-story .ports-stat-most-visited-card,
  #view-ports .status-row-story .ports-stat-top5-card--wide{
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: auto !important;
  }
}

/* ===== Map route header upgrade ===== */
.ports-route-context{
  position: sticky;
  top: 0;
  z-index: 410;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
body:not(.light) .ports-route-context{
  background: rgba(15,23,42,.82);
  border-color: rgba(148,163,184,.28);
}
.ports-route-context-main{
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 800;
  color: var(--text);
}
.ports-route-context-label{ white-space: nowrap; }
.ports-route-context-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ports-route-context-meta{
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
#ports-route-timeline-title:empty{ display:none; }
@media (max-width: 760px){
  .ports-route-context{
    position: relative;
    top: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
  }
  .ports-route-context-main{ width:100%; }
  .ports-route-context-meta{ white-space: normal; }
}

/* ===== Clean map route header layout ===== */
#ports-route-pill{
  display:none !important;
}
.ports-route-context{
  display:block !important;
  margin: 0 0 10px !important;
  padding: 10px 12px 12px !important;
}
.ports-route-context[style*="display:none"]{
  display:none !important;
}
.ports-route-context-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}
.ports-route-context-main{
  min-width:0;
  flex:1 1 auto;
}
.ports-route-context-meta{
  flex:0 0 auto;
  text-align:right;
}
.ports-route-context .route-timeline-card{
  margin-top:10px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.ports-route-context .route-preview-wrap{
  margin-top:0;
}
.ports-route-context .route-preview-scroll{
  max-width:100%;
}
@media (max-width:760px){
  .ports-route-context-titlebar{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
  .ports-route-context-meta{
    text-align:left;
    white-space:normal;
  }
}

/* ===== Premium map day banner + replay controls polish ===== */
.ports-map-day-banner{
  top:10px !important;
  transform:translate(-50%, -10px) scale(.98) !important;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:9px 16px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.55) !important;
  background:rgba(15,23,42,.72) !important;
  color:#f8fafc !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 34px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  min-width:min(360px, calc(100% - 32px));
  max-width:calc(100% - 32px) !important;
  pointer-events:none;
}
.ports-map-day-banner.is-visible{
  opacity:1 !important;
  transform:translate(-50%, 0) scale(1) !important;
}
.ports-map-day-banner.is-changing .ports-map-day-main,
.ports-map-day-banner.is-changing .ports-map-day-sub{
  animation:portsDayBannerIn .28s ease both;
}
.ports-map-day-main{
  display:block;
  font-weight:900;
  font-size:.86rem;
  line-height:1.08;
  letter-spacing:.01em;
}
.ports-map-day-sub{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
  font-size:.78rem;
  line-height:1.1;
  color:rgba(226,232,240,.9);
}
body.light .ports-map-day-banner{
  background:rgba(255,255,255,.84) !important;
  color:#0f172a !important;
  border-color:rgba(148,163,184,.34) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.light .ports-map-day-sub{ color:#475569; }
@keyframes portsDayBannerIn{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:translateY(0); }
}

.ports-playback-controls{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.ports-playback-media-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
.ports-playback-media-row .btn{
  min-height:38px;
  border-radius:999px;
  font-weight:800;
}
.ports-playback-media-row .btn:disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none !important;
}
.ports-playback-day{
  margin-left:auto;
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:42%;
}
.ports-playback-progress{
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(148,163,184,.18);
  box-shadow:inset 0 1px 2px rgba(15,23,42,.08);
}
.ports-playback-progress span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #38bdf8, #a855f7);
  transition:width .28s ease;
}

.ports-route-map-toolbar{
  gap:10px !important;
  padding:9px 10px !important;
}
.ports-route-dock-progress{
  position:relative;
  width:120px;
  height:30px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(148,163,184,.18);
  border:1px solid rgba(148,163,184,.25);
  flex:0 0 auto;
}
.ports-route-dock-progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.78), rgba(168,85,247,.78));
  transition:width .3s ease;
}
.ports-route-dock-progress-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:900;
  color:#0f172a;
  text-shadow:0 1px 0 rgba(255,255,255,.42);
}
body:not(.light) .ports-route-dock-progress-text{ color:#f8fafc; text-shadow:none; }
.ports-route-map-toolbar .route-pill-btn{
  font-weight:850;
}
@media (max-width:640px){
  .ports-map-day-banner{
    top:8px !important;
    min-width:min(300px, calc(100% - 24px));
    padding:8px 12px !important;
  }
  .ports-map-day-main{ font-size:.8rem; }
  .ports-map-day-sub{ font-size:.72rem; }
  .ports-playback-media-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .ports-playback-media-row .btn{
    flex:1 1 0;
    min-width:0;
    padding-left:10px;
    padding-right:10px;
  }
  .ports-playback-day{
    flex:1 0 100%;
    max-width:100%;
    margin-left:0;
    text-align:center;
    font-size:.8rem;
  }
  .ports-route-map-toolbar{
    flex-wrap:wrap;
  }
  .ports-route-dock-progress{
    flex:1 0 100%;
    width:100%;
    height:8px;
  }
  .ports-route-dock-progress-text{ display:none; }
}

/* Compact route playback controls — keep the route header tight */
#ports-route-timeline .ports-playback-controls{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  margin-top:8px !important;
  padding-top:8px !important;
  border-top:1px solid var(--surface-border) !important;
  min-height:0 !important;
}
#ports-route-timeline .ports-playback-controls .btn{
  flex:0 0 auto !important;
  min-height:30px !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  font-size:.84rem !important;
  line-height:1.1 !important;
}
#ports-route-timeline .ports-playback-controls .btn-primary{
  padding-left:14px !important;
  padding-right:14px !important;
}
#ports-route-timeline .ports-playback-day{
  margin-left:auto !important;
  width:auto !important;
  max-width:45% !important;
  flex:0 1 auto !important;
  text-align:right !important;
  font-size:.86rem !important;
  font-weight:800 !important;
  color:var(--muted) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#ports-route-timeline .route-timeline-line{
  margin-bottom:8px !important;
}
@media (max-width:640px){
  #ports-route-timeline .ports-playback-controls{
    gap:6px !important;
    overflow-x:auto !important;
    padding-bottom:2px !important;
    -webkit-overflow-scrolling:touch;
  }
  #ports-route-timeline .ports-playback-controls .btn{
    min-height:30px !important;
    padding:5px 10px !important;
    font-size:.78rem !important;
    white-space:nowrap !important;
  }
  #ports-route-timeline .ports-playback-day{
    max-width:none !important;
    flex:0 0 auto !important;
    margin-left:6px !important;
    font-size:.78rem !important;
  }
}

/* ===============================
   Ports of Call — stacked planner rows
   =============================== */
.trip-modal-body #ports-list.ports-list,
.trip-modal-body .ports-list#ports-list,
#ports-list.ports-list{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  margin:8px 0 12px !important;
}

.port-call-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:10px 14px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  background:linear-gradient(135deg, rgba(15,23,42,.86), rgba(30,41,59,.74));
  box-shadow:0 10px 24px rgba(2,6,23,.18);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, opacity .18s ease;
}
body.light .port-call-row{
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9));
  border-color:rgba(148,163,184,.35);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.port-call-row:hover{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.42);
  box-shadow:0 16px 32px rgba(2,6,23,.22);
}
body.light .port-call-row:hover{ box-shadow:0 16px 30px rgba(15,23,42,.12); }
.port-call-row.is-hidden-port{
  opacity:.58;
  border-style:dashed;
}
.port-call-row.is-hidden-port .port-call-name{ text-decoration:line-through; }

.port-call-move{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
}
.port-call-move-btn{
  width:26px;
  height:22px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  opacity:.9;
}
.port-call-move-btn:hover:not(:disabled){ color:var(--accent); transform:scale(1.08); }
.port-call-move-btn:disabled{ opacity:.25; cursor:default; }

.port-call-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.port-call-icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(148,163,184,.22);
  font-size:1.05rem;
}
.port-call-row.is-sea-day .port-call-icon{
  background:rgba(56,189,248,.16);
}
.port-call-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:800;
  color:var(--text);
  font-size:1rem;
}

.port-call-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.port-call-action-btn{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted);
  font-size:1.1rem;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, transform .16s ease, opacity .16s ease;
  opacity:.84;
}
.port-call-action-btn:hover{
  background:rgba(148,163,184,.16);
  color:var(--text);
  transform:translateY(-1px);
  opacity:1;
}
.port-call-action-btn.danger:hover{
  color:#ef4444;
  background:rgba(239,68,68,.10);
}

.trip-form-section-ports .field-row:has(#port-input){
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto auto !important;
  gap:10px !important;
  align-items:center !important;
}
.trip-form-section-ports #add-port-btn,
.trip-form-section-ports #add-sea-day-btn{
  min-height:42px;
  border-radius:14px;
  white-space:nowrap;
}
.trip-form-section-ports #add-sea-day-btn::before{ content:"🌊 "; }

@media (max-width: 640px){
  .port-call-row{
    min-height:52px;
    padding:9px 10px;
    gap:8px;
    border-radius:14px;
  }
  .port-call-name{ font-size:.92rem; }
  .port-call-icon{ width:26px; height:26px; font-size:.95rem; }
  .port-call-action-btn{ width:32px; height:32px; }
  .trip-form-section-ports .field-row:has(#port-input){
    grid-template-columns:1fr 1fr !important;
  }
  .trip-form-section-ports .field-row:has(#port-input) .field{
    grid-column:1 / -1;
  }
  .trip-form-section-ports #add-port-btn,
  .trip-form-section-ports #add-sea-day-btn{
    width:100%;
  }
}

/* =========================
  Edit Trip grouped form polish
  - makes the modal read like clear field groups
========================== */
#trip-form .trip-form-section{
  position:relative;
  margin:0 0 18px;
  padding:18px 18px 16px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:20px;
  background:
    linear-gradient(135deg, rgba(15,23,42,.72), rgba(15,23,42,.52)),
    radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 46%);
  box-shadow:0 16px 36px rgba(2,6,23,.16);
}
body.light #trip-form .trip-form-section{
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.88)),
    radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 48%);
  border-color:rgba(148,163,184,.30);
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
#trip-form .trip-form-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 14px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(148,163,184,.16);
  color:var(--muted);
  font-size:.74rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
}
#trip-form .trip-form-section-title::before{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(148,163,184,.20);
  letter-spacing:0;
  font-size:.86rem;
  color:var(--text);
}
.trip-form-section-basics .trip-form-section-title::before{ content:"✦"; }
.trip-form-section-dates .trip-form-section-title::before{ content:"📅"; }
.trip-form-section-ship .trip-form-section-title::before{ content:"🚢"; }
.trip-form-section-travel .trip-form-section-title::before{ content:"✈️"; }
.trip-form-section-financial .trip-form-section-title::before{ content:"💳"; }
.trip-form-section-ports .trip-form-section-title::before{ content:"⚓"; }
.trip-form-section-addons .trip-form-section-title::before{ content:"✨"; }
.trip-form-section-notes .trip-form-section-title::before{ content:"📝"; }

#trip-form .field > label,
#trip-form .addons-title,
#trip-form .payment-tracker > label{
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
}
#trip-form .field-row{
  gap:14px;
}
#trip-form .field{
  margin-bottom:12px;
}
#trip-form .trip-form-section .field:last-child,
#trip-form .trip-form-section .field-row:last-child,
#trip-form .trip-form-section .row:last-child,
#trip-form .trip-form-section .addons:last-child{
  margin-bottom:0;
}
#trip-form .payment-tracker,
#trip-form .addons{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.30);
}
body.light #trip-form .payment-tracker,
body.light #trip-form .addons{
  background:rgba(248,250,252,.72);
  border-color:rgba(148,163,184,.26);
}
#trip-form .trip-form-section-ports .help-text{
  display:block;
  margin-top:8px;
}
#trip-form .trip-form-section-notes textarea{
  min-height:96px;
}
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:820px){
  #trip-modal-backdrop .trip-modal-body #trip-form-card{
    padding:0 14px 8px !important;
  }
  #trip-form .trip-form-section{
    margin:0 0 14px;
    padding:14px 14px 13px;
    border-radius:18px;
    box-shadow:0 10px 22px rgba(2,6,23,.12);
  }
  #trip-form .trip-form-section-title{
    margin-bottom:12px;
    padding-bottom:9px;
    font-size:.68rem;
    letter-spacing:.18em;
  }
  #trip-form .trip-form-section-title::before{
    width:20px;
    height:20px;
    font-size:.78rem;
  }
  #trip-form .field-row,
  #trip-form .row{
    gap:10px !important;
  }
  #trip-form .field{
    margin-bottom:10px;
  }
  #trip-form .payment-tracker,
  #trip-form .addons{
    padding:12px;
    border-radius:15px;
  }
  #trip-form .trip-form-section-ports .field-row:has(#port-input){
    margin-top:8px;
  }
}

@media (min-width:821px){
  #trip-form .trip-form-section-basics,
  #trip-form .trip-form-section-dates,
  #trip-form .trip-form-section-ship,
  #trip-form .trip-form-section-travel,
  #trip-form .trip-form-section-financial,
  #trip-form .trip-form-section-ports,
  #trip-form .trip-form-section-addons,
  #trip-form .trip-form-section-notes{
    max-width:none;
  }
}

/* =========================================================
   FORM POLISH PASS V3 — stronger groups, tighter rhythm,
   standout payment tracker, planner/agenda grouping
========================================================= */
#trip-form .trip-form-section{
  margin-bottom:14px !important;
  padding:15px 16px 14px !important;
}
#trip-form .trip-form-section-title{
  position:relative;
  justify-content:flex-start;
  margin-bottom:11px !important;
  padding:0 0 9px !important;
  color:var(--text) !important;
  opacity:.92;
  font-size:.72rem !important;
  letter-spacing:.18em !important;
  border-bottom:1px solid rgba(148,163,184,.20) !important;
}
#trip-form .trip-form-section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:42px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
#trip-form .trip-form-section-title::before{
  width:24px !important;
  height:24px !important;
  font-size:.9rem !important;
  background:linear-gradient(135deg, rgba(56,189,248,.16), rgba(168,85,247,.12)) !important;
  border-color:rgba(56,189,248,.24) !important;
  box-shadow:0 8px 18px rgba(56,189,248,.10);
}

/* Tighter edit form rhythm */
#trip-form .field{ margin-bottom:9px !important; }
#trip-form .field-row,
#trip-form .row{ gap:10px !important; }
#trip-form .help-text,
#trip-form .hint,
#trip-form small{ line-height:1.22 !important; }
#trip-form input,
#trip-form select,
#trip-form textarea{
  min-height:38px;
}

/* Payment tracker: make it feel like a premium mini-dashboard */
#trip-form .payment-tracker{
  position:relative;
  margin-top:10px !important;
  margin-bottom:10px !important;
  padding:16px !important;
  border-radius:18px !important;
  border:1px solid rgba(56,189,248,.26) !important;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.18), transparent 46%),
    linear-gradient(135deg, rgba(15,23,42,.54), rgba(30,41,59,.34)) !important;
  box-shadow:0 16px 34px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
body.light #trip-form .payment-tracker{
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.16), transparent 48%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,249,255,.80)) !important;
  box-shadow:0 16px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
}
#trip-form .payment-tracker::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg, #22c55e, var(--accent), var(--accent-2));
}
#trip-form .payment-tracker > label{
  display:flex !important;
  align-items:center;
  gap:7px;
  margin-bottom:10px !important;
  color:var(--text) !important;
  font-size:.78rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase;
}
#trip-form .payment-tracker > label::before{ content:"💳"; letter-spacing:0; }
#trip-form .payment-summary{
  margin-top:10px !important;
  padding-top:8px;
  border-top:1px solid rgba(148,163,184,.14);
}
#trip-form .payment-list{ margin-top:8px !important; }

/* Save dock: cleaner final action area */
#trip-form .form-footer,
#trip-modal-backdrop .trip-modal-footer-dock{
  box-shadow:0 -14px 32px rgba(2,6,23,.13) !important;
}
#trip-form .form-footer .btn-primary,
#trip-modal-backdrop .trip-modal-footer-dock .btn-primary{
  min-width:132px;
  font-weight:900 !important;
}
#trip-form .form-footer .btn:not(.btn-primary),
#trip-modal-backdrop .trip-modal-footer-dock .btn:not(.btn-primary){
  min-width:112px;
}

/* Trip Planner + Daily Agenda: use the same grouped-card language */
.trip-planner .planner-sections{
  gap:12px !important;
}
.trip-planner .planner-section{
  position:relative;
  padding:14px 14px 13px !important;
  border-radius:18px !important;
  border:1px solid rgba(148,163,184,.24) !important;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.12), transparent 44%),
    linear-gradient(135deg, rgba(15,23,42,.70), rgba(15,23,42,.48)) !important;
  box-shadow:0 14px 28px rgba(2,6,23,.14) !important;
}
body.light .trip-planner .planner-section{
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.10), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.86)) !important;
  box-shadow:0 12px 24px rgba(15,23,42,.08) !important;
}
.trip-planner .planner-section::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.trip-planner .planner-section h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 11px !important;
  padding-bottom:8px;
  border-bottom:1px solid rgba(148,163,184,.18);
  color:var(--text) !important;
  opacity:.92;
  font-size:.72rem !important;
  letter-spacing:.17em !important;
  font-weight:950 !important;
  text-transform:uppercase;
}
.trip-planner .planner-section h4::before{
  display:inline-flex;
  width:22px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(56,189,248,.13);
  border:1px solid rgba(56,189,248,.22);
  letter-spacing:0;
  font-size:.85rem;
  flex:0 0 auto;
}
.trip-planner .planner-section:nth-child(1) h4::before{ content:"🛶"; }
.trip-planner .planner-section:nth-child(2) h4::before{ content:"🗓️"; }
.trip-planner .planner-section:nth-child(3) h4::before{ content:"📎"; }
.trip-planner .planner-add,
.trip-planner .planner-docs-upload{
  padding:10px !important;
  border-radius:14px !important;
  background:rgba(148,163,184,.07) !important;
  border:1px solid rgba(148,163,184,.14) !important;
}
body.light .trip-planner .planner-add,
body.light .trip-planner .planner-docs-upload{
  background:rgba(241,245,249,.62) !important;
}
.trip-planner .planner-list{ gap:7px !important; }
.trip-planner .planner-item,
.agenda-day-card,
.daily-agenda-card{
  border-radius:14px !important;
}

@media (max-width:820px){
  #trip-form .trip-form-section{
    margin-bottom:10px !important;
    padding:11px 12px 10px !important;
    border-radius:16px !important;
  }
  #trip-form .trip-form-section-title{
    margin-bottom:8px !important;
    padding-bottom:7px !important;
    font-size:.64rem !important;
    letter-spacing:.15em !important;
  }
  #trip-form .trip-form-section-title::before{
    width:20px !important;
    height:20px !important;
    font-size:.76rem !important;
  }
  #trip-form .field{ margin-bottom:7px !important; }
  #trip-form .field-row,
  #trip-form .row{ gap:8px !important; }
  #trip-form .payment-tracker{
    padding:12px !important;
    border-radius:16px !important;
  }
  .trip-planner .planner-section{
    padding:11px 12px 10px !important;
    border-radius:16px !important;
  }
  .trip-planner .planner-section h4{
    margin-bottom:8px !important;
    padding-bottom:7px;
    font-size:.64rem !important;
    letter-spacing:.15em !important;
  }
  .trip-planner .planner-section h4::before{
    width:20px;
    height:20px;
    font-size:.76rem;
  }
  .trip-planner .planner-add,
  .trip-planner .planner-docs-upload{
    padding:8px !important;
  }
}

/* === Collapsible grouped sections + inline intelligence polish === */
#trip-form .trip-form-section,
.trip-planner .planner-section{
  overflow:hidden;
}
#trip-form .trip-form-section-title,
.trip-planner .planner-section h4{
  cursor:pointer;
  user-select:none;
  display:flex !important;
  align-items:center;
  gap:8px;
}
#trip-form .trip-form-section-title .section-title-text,
.trip-planner .planner-section h4 .section-title-text{
  flex:1 1 auto;
}
.section-chevron{
  margin-left:auto;
  width:24px;
  height:24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  line-height:1;
  color:var(--muted);
  background:rgba(148,163,184,.10);
  border:1px solid rgba(148,163,184,.18);
  transition:transform .22s ease, background .22s ease, color .22s ease;
}
.trip-form-section:not(.is-collapsed) .section-chevron,
.planner-section:not(.is-collapsed) .section-chevron{
  transform:rotate(180deg);
  color:var(--accent);
  background:rgba(56,189,248,.12);
}
.trip-section-body{
  overflow:hidden;
  max-height:2000px;
  opacity:1;
  transform:translateY(0);
  transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
}
.trip-form-section.is-collapsed .trip-section-body,
.planner-section.is-collapsed .trip-section-body{
  max-height:0 !important;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
}
.trip-smart-hints,
.planner-smart-hints{
  display:grid;
  gap:6px;
  margin:0 0 10px;
}
.trip-smart-hint,
.planner-smart-hint{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  font-size:.82rem;
  line-height:1.25;
  color:var(--text);
  background:rgba(56,189,248,.09);
  border:1px solid rgba(56,189,248,.18);
}
.trip-smart-hint strong,
.planner-smart-hint strong{ font-weight:800; }
.trip-smart-hint.warning{
  background:rgba(245,158,11,.10);
  border-color:rgba(245,158,11,.28);
}
.trip-smart-hint.good{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.24);
}
.trip-smart-hint .hint-icon,
.planner-smart-hint .hint-icon{
  flex:0 0 auto;
  transform:translateY(-1px);
}
body.light .trip-smart-hint,
body.light .planner-smart-hint{
  background:rgba(14,165,233,.08);
}
body.light .trip-smart-hint.warning{ background:rgba(245,158,11,.12); }
body.light .trip-smart-hint.good{ background:rgba(34,197,94,.11); }

@media (max-width:820px){
  .trip-smart-hints,
  .planner-smart-hints{ margin-bottom:8px; gap:5px; }
  .trip-smart-hint,
  .planner-smart-hint{ padding:7px 9px; font-size:.78rem; border-radius:11px; }
  .section-chevron{ width:22px; height:22px; font-size:.72rem; }
}

/* === Excursion decision engine: Planning / Considering / Booked / Don't rebook === */
.exc-decision-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  grid-column:1 / -1;
  margin:0 0 2px;
}
.exc-decision-option{
  appearance:none;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(148,163,184,.08);
  color:var(--muted);
  border-radius:999px;
  padding:6px 10px;
  font-size:.76rem;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.exc-decision-option:hover{
  transform:translateY(-1px);
  color:var(--text);
  background:rgba(148,163,184,.14);
}
.exc-decision-option.is-active{
  color:var(--text);
  border-color:rgba(56,189,248,.42);
  background:rgba(56,189,248,.15);
  box-shadow:0 8px 18px rgba(56,189,248,.10);
}
.exc-decision-toggle[data-exc-status="booked"] .exc-decision-option.is-active{
  border-color:rgba(34,197,94,.42);
  background:rgba(34,197,94,.14);
  box-shadow:0 8px 18px rgba(34,197,94,.10);
}
.exc-decision-toggle[data-exc-status="considering"] .exc-decision-option.is-active{
  border-color:rgba(245,158,11,.42);
  background:rgba(245,158,11,.14);
  box-shadow:0 8px 18px rgba(245,158,11,.10);
}
.exc-decision-toggle[data-exc-status="dont-rebook"] .exc-decision-option.is-active{
  border-color:rgba(248,113,113,.45);
  background:rgba(248,113,113,.13);
  box-shadow:0 8px 18px rgba(248,113,113,.10);
}
.planner-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:5px;
}
.exc-decision-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border-radius:999px;
  padding:4px 8px;
  font-size:.68rem;
  font-weight:900;
  line-height:1;
  border:1px solid rgba(148,163,184,.22);
  color:var(--muted);
  background:rgba(148,163,184,.08);
  white-space:nowrap;
}
.exc-decision-badge.exc-state-booked{
  color:#22c55e;
  border-color:rgba(34,197,94,.30);
  background:rgba(34,197,94,.10);
}
.exc-decision-badge.exc-state-considering{
  color:#f59e0b;
  border-color:rgba(245,158,11,.32);
  background:rgba(245,158,11,.10);
}
.exc-decision-badge.exc-state-dont-rebook{
  color:#f87171;
  border-color:rgba(248,113,113,.34);
  background:rgba(248,113,113,.10);
}
.exc-row-status{
  margin:4px 0 6px;
}
.exc-row-status .exc-decision-option{
  padding:5px 8px;
  font-size:.68rem;
}
.exc-edit-status{
  margin-bottom:8px;
}
body.light .exc-decision-option{
  background:rgba(241,245,249,.85);
  border-color:rgba(148,163,184,.32);
}
body.light .exc-decision-badge{
  background:rgba(241,245,249,.78);
}
@media (max-width:700px){
  .exc-decision-toggle{ gap:5px; }
  .exc-decision-option{ padding:6px 8px; font-size:.68rem; }
  .exc-row-status .exc-decision-option{ font-size:.64rem; padding:5px 7px; }
  .planner-title-row{ gap:6px; }
}


/* =========================================================
   PATCH: Ports of Call add controls
   Ensure Add Port + Sea Day are visible in the new stacked ports UI
========================================================= */
#trip-form .trip-form-section-ports .field-row:has(#port-input){
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto auto !important;
  gap:10px !important;
  align-items:center !important;
  margin-top:10px !important;
}
#trip-form .trip-form-section-ports #add-port-btn,
#trip-form .trip-form-section-ports #add-sea-day-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:14px !important;
  white-space:nowrap !important;
}
#trip-form .trip-form-section-ports #add-sea-day-btn::before{
  content:"🌊 ";
}
@media (max-width:640px){
  #trip-form .trip-form-section-ports .field-row:has(#port-input){
    grid-template-columns:1fr 1fr !important;
  }
  #trip-form .trip-form-section-ports .field-row:has(#port-input) .field{
    grid-column:1 / -1 !important;
  }
  #trip-form .trip-form-section-ports #add-port-btn,
  #trip-form .trip-form-section-ports #add-sea-day-btn{
    width:100% !important;
  }
}

/* Keep expanded Ports of Call sections from clipping added port rows. */
#trip-form .trip-form-section-ports:not(.is-collapsed) > .trip-section-body{
  max-height:none !important;
  overflow:visible !important;
}

/* =========================================================
   PATCH: Onboard Add-ons mobile clipping fix
   Keep expanded add-ons sections from clipping toggles/fields,
   matching the Ports of Call show-all behavior.
========================================================= */
#trip-form .trip-form-section-addons:not(.is-collapsed),
#trip-form .trip-form-section-addons:not(.is-collapsed) > .trip-section-body{
  max-height:none !important;
  overflow:visible !important;
}
#trip-form .trip-form-section-addons .addons,
#trip-form .trip-form-section-addons .addons-grid,
#trip-form .trip-form-section-addons .addons-extra{
  overflow:visible !important;
}
@media (max-width:640px){
  #trip-form .trip-form-section-addons .addons-grid{
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }
  #trip-form .trip-form-section-addons .addon-toggle{
    min-width:0 !important;
    width:100% !important;
  }
  #trip-form .trip-form-section-addons .addons-extra,
  #trip-form .trip-form-section-addons .field,
  #trip-form .trip-form-section-addons input,
  #trip-form .trip-form-section-addons select{
    width:100% !important;
    max-width:100% !important;
  }
}
@media (max-width:430px){
  #trip-form .trip-form-section-addons .addons-grid{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   PATCH: Mobile Edit Trip sections should show full content
   Fixes Ship & Cabin, Travel, Financial clipping after compact/collapsible polish.
========================================================= */
#trip-form .trip-form-section:not(.is-collapsed),
.trip-planner .planner-section:not(.is-collapsed){
  overflow: visible !important;
}
#trip-form .trip-form-section:not(.is-collapsed) > .trip-section-body,
.trip-planner .planner-section:not(.is-collapsed) > .trip-section-body{
  max-height: none !important;
  overflow: visible !important;
}
@media (max-width: 820px){
  #trip-form .trip-form-section:not(.is-collapsed) > .trip-section-body,
  .trip-planner .planner-section:not(.is-collapsed) > .trip-section-body{
    max-height: none !important;
    overflow: visible !important;
  }
}

/* =========================================================
   PATCH: Confirmations & Documents mobile show-full fix
   Keeps the document upload controls and document list from clipping
   inside the polished/collapsible Trip Planner sections.
========================================================= */
.trip-planner .planner-section[data-private-docs]:not(.is-collapsed),
.trip-planner .planner-section[data-private-docs]:not(.is-collapsed) > .trip-section-body{
  max-height:none !important;
  overflow:visible !important;
}
.trip-planner .planner-section[data-private-docs] .planner-docs-upload,
.trip-planner .planner-section[data-private-docs] .planner-list,
.trip-planner .planner-section[data-private-docs] .doc-row,
.trip-planner .planner-section[data-private-docs] .planner-docs-empty,
.trip-planner .planner-section[data-private-docs] .planner-mini-note{
  max-height:none !important;
  overflow:visible !important;
}
@media (max-width:760px){
  .trip-planner .planner-section[data-private-docs] .planner-docs-upload{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:stretch !important;
  }
  .trip-planner .planner-section[data-private-docs] .planner-docs-upload input,
  .trip-planner .planner-section[data-private-docs] .planner-docs-upload select,
  .trip-planner .planner-section[data-private-docs] .planner-docs-upload button{
    width:100% !important;
    max-width:100% !important;
    min-height:42px !important;
  }
  .trip-planner .planner-section[data-private-docs] .doc-row{
    display:block !important;
    padding:10px !important;
  }
  .trip-planner .planner-section[data-private-docs] .doc-title,
  .trip-planner .planner-section[data-private-docs] .doc-meta{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
  .trip-planner .planner-section[data-private-docs] .doc-row .planner-actions{
    justify-content:flex-start !important;
    margin-top:8px !important;
  }
}

/* =========================================================
   PATCH: Mobile Daily Agenda inline edit safe layout
   Fixes agenda edit rows overflowing off-screen on phones and
   keeps Save/Cancel reachable above the mobile tab bar.
========================================================= */
@media (max-width: 760px){
  .trip-planner,
  .planner-section,
  .agenda-days,
  .agenda-day-card,
  .agenda-drop,
  .planner-item.agenda-item{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .trip-planner{
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .planner-item.agenda-item{
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  .planner-item.agenda-item .planner-text{
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .planner-item.agenda-item .planner-actions{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .planner-item.agenda-item.is-editing{
    grid-template-columns: 26px minmax(0, 1fr) !important;
    overflow: visible !important;
    padding: 10px !important;
  }

  .planner-item.agenda-item.is-editing .agenda-edit-grid{
    grid-column: 2 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .planner-item.agenda-item.is-editing .agenda-edit-grid input,
  .planner-item.agenda-item.is-editing .agenda-edit-grid select,
  .planner-item.agenda-item.is-editing .agenda-edit-grid textarea{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  .planner-item.agenda-item.is-editing > .planner-actions{
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 8px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(148,163,184,.18) !important;
    background: inherit !important;
  }

  .planner-item.agenda-item.is-editing > .planner-actions .icon-btn{
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 14px !important;
  }

  .planner-item.agenda-item.is-editing > .planner-actions .agenda-save::after{
    content: " Save";
    font-size: .9rem;
    font-weight: 750;
  }
  .planner-item.agenda-item.is-editing > .planner-actions .agenda-cancel::after{
    content: " Cancel";
    font-size: .9rem;
    font-weight: 750;
  }
}

@media (max-width: 420px){
  .planner-item.agenda-item{
    padding: 9px !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
  }
  .planner-item.agenda-item .planner-actions{
    gap: 5px !important;
  }
  .planner-item.agenda-item .planner-actions .icon-btn{
    width: 34px !important;
    height: 34px !important;
  }
}

/* ===============================
   Ports of Call — ship schedule mini fields
   =============================== */
.port-call-main{
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
.port-call-title{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.port-call-schedule{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
  padding-left:40px;
}
.port-call-time-field{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.port-call-time-field span{
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
.port-call-time-field input{
  width:100%;
  min-height:32px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.36);
  color:var(--text);
  padding:6px 9px;
  font-size:.86rem;
  outline:none;
}
body.light .port-call-time-field input{
  background:rgba(255,255,255,.88);
  border-color:rgba(148,163,184,.45);
  color:#0f172a;
}
.port-call-time-field input:focus{
  border-color:rgba(56,189,248,.9);
  box-shadow:0 0 0 3px rgba(56,189,248,.14);
}
@media (max-width: 640px){
  .port-call-row{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:start;
  }
  .port-call-schedule{
    grid-template-columns:1fr;
    padding-left:34px;
    gap:6px;
  }
  .port-call-time-field{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    align-items:center;
  }
  .port-call-time-field input{
    min-height:34px;
  }
}

/* Command Center live port intelligence */
.command-center-event-subtext{
  color: var(--muted);
  font-size: .88rem;
  font-weight: 700;
}
.command-center-priority-row.in_port{
  border-color: rgba(56,189,248,.24);
  background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(255,255,255,.025));
}
.command-center-priority-row.all_aboard,
.command-center-priority-row.ship_departure{
  border-color: rgba(245,158,11,.26);
  background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(255,255,255,.025));
}
.command-center-port-progress{
  margin-top: 10px;
}
.command-center-port-progress-bar{
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.command-center-port-progress-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(56,189,248,.85), rgba(34,197,94,.85));
  transition: width .45s ease;
}
.command-center-port-progress-label{
  margin-top: 5px;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
}

/* PATCH: clickable planner hint link to Ports of Call */
.planner-smart-link{
  border:0;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-weight:800;
  padding:0;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.planner-smart-link:hover{ filter:brightness(1.08); }

/* PATCH: Command Center status header upgrade */
.command-center-line.is-status-header{
  padding:0;
  border:0;
  background:transparent;
}
.command-center-status-header{
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:18px;
  padding:14px 16px;
  background:linear-gradient(135deg, rgba(56,189,248,.09), rgba(168,85,247,.06));
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.command-center-status-header.warning{
  background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(56,189,248,.06));
  box-shadow:0 0 0 1px rgba(245,158,11,.12), 0 10px 24px rgba(15,23,42,.08);
}
.command-center-status-header.urgent{
  background:linear-gradient(135deg, rgba(239,68,68,.12), rgba(245,158,11,.08));
  box-shadow:0 0 0 1px rgba(239,68,68,.16), 0 0 24px rgba(239,68,68,.12);
  animation:commandCenterPulse 1.8s ease-in-out infinite;
}
.command-center-status-title{
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.01em;
}
.command-center-status-subtitle{
  margin-top:6px;
  color:var(--muted);
  font-weight:750;
}
.command-center-status-subtitle.warning{ color:#b45309; }
.command-center-status-subtitle.urgent{ color:#b91c1c; }
body.light .command-center-status-header{
  background:linear-gradient(135deg, rgba(14,165,233,.09), rgba(168,85,247,.05));
}
body.light .command-center-status-header.warning{
  background:linear-gradient(135deg, rgba(245,158,11,.12), rgba(14,165,233,.05));
}
body.light .command-center-status-header.urgent{
  background:linear-gradient(135deg, rgba(239,68,68,.12), rgba(245,158,11,.07));
}

/* Command Center v2: Today/Tomorrow readability cards */
.command-center-day-card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.command-center-day-card{
  border:1px solid var(--line, rgba(255,255,255,.12));
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.025);
  box-shadow:0 10px 24px rgba(15,23,42,.04);
}
.command-center-today-card{
  background:linear-gradient(135deg, rgba(56,189,248,.055), rgba(255,255,255,.02));
}
.command-center-tomorrow-card{
  background:linear-gradient(135deg, rgba(168,85,247,.05), rgba(255,255,255,.02));
}
.command-center-tomorrow-card strong{
  display:block;
  font-size:.98rem;
  line-height:1.35;
}

/* Command Center clean v2: Today, Port Intelligence, and Tomorrow are standalone cards */
.command-center-insight-grid.command-center-insight-grid-priority{
  grid-template-areas:
    "primary support"
    "today today"
    "portcall portcall"
    "tomorrow tomorrow"
    "weather weather";
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-port-card{
  grid-area: portcall;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-today-panel{
  grid-area: today;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-port-intelligence{
  grid-area: portintel;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-tomorrow-panel{
  grid-area: tomorrow;
}
.command-center-day-panel{
  min-height: 118px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:12px;
  animation: ttFadeSlideIn .32s ease both;
}
.command-center-day-panel .command-center-section-title{
  margin:0;
}
.command-center-today-panel{
  background:linear-gradient(135deg, rgba(56,189,248,.065), rgba(255,255,255,.028));
}
.command-center-tomorrow-panel{
  background:linear-gradient(135deg, rgba(168,85,247,.06), rgba(255,255,255,.028));
}
.command-center-tomorrow-panel strong{
  display:block;
  font-size:1.02rem;
  line-height:1.35;
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support{
  grid-template-areas:
    "primary"
    "today"
    "portcall"
    "portintel"
    "tomorrow"
    "weather";
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-port-card,
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-today-panel,
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-port-intelligence,
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support .command-center-tomorrow-panel{
  grid-column:1 / -1;
}
@media (max-width: 900px){
  .command-center-insight-grid.command-center-insight-grid-priority{
    grid-template-areas:
      "primary"
      "support"
      "today"
      "portcall"
      "portintel"
      "tomorrow"
      "weather";
  }
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-port-card,
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-today-panel,
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-port-intelligence,
  .command-center-insight-grid.command-center-insight-grid-priority .command-center-tomorrow-panel{
    grid-area:auto;
    grid-column:auto;
    grid-row:auto;
  }
}


/* Command Center v2 polish: Today hierarchy, smart tomorrow, next glow, refresh pulse */
.command-center-today-panel{
  cursor:pointer;
  text-align:left;
  width:100%;
  color:inherit;
  font:inherit;
}
.command-center-today-panel:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(15,23,42,.10);
}
.command-center-section-title-today{
  font-weight:900;
  letter-spacing:.075em;
  font-size:.86rem;
}
.command-center-section-title-tomorrow{
  font-weight:700;
  letter-spacing:.055em;
  opacity:.86;
}
.command-center-card-action-hint{
  margin-top:auto;
  font-size:.76rem;
  color:var(--muted, #94a3b8);
}
.command-center-tomorrow-smart{
  font-size:.9rem;
  line-height:1.35;
  color:var(--muted, #94a3b8);
}
.command-center-mini-pill{
  align-self:flex-start;
  border:1px solid rgba(148,163,184,.25);
  border-radius:999px;
  padding:4px 9px;
  font-size:.74rem;
  color:var(--muted, #94a3b8);
  background:rgba(255,255,255,.035);
}
.command-center-priority-row.next.is-highlighted{
  position:relative;
  box-shadow:0 0 0 1px rgba(56,189,248,.22), 0 0 24px rgba(56,189,248,.16);
  animation: commandCenterNextGlow 2.4s ease-in-out infinite;
}
@keyframes commandCenterNextGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(56,189,248,.20), 0 0 16px rgba(56,189,248,.10); }
  50%{ box-shadow:0 0 0 1px rgba(56,189,248,.38), 0 0 28px rgba(56,189,248,.22); }
}
.command-center-refresh-pulse{
  animation: commandCenterRefreshPulse .42s ease both;
}
@keyframes commandCenterRefreshPulse{
  from{ opacity:.72; transform:translateY(2px); }
  to{ opacity:1; transform:translateY(0); }
}
.command-center-port-suggestion{
  margin-top:8px;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid rgba(56,189,248,.16);
  background:rgba(56,189,248,.07);
  color:var(--muted, #94a3b8);
  font-size:.86rem;
  line-height:1.35;
}

/* Command Center: TODAY agenda time-first polish */
.command-center-today-agenda-list{
  gap: 12px !important;
}
.command-center-today-agenda-item .command-center-agenda-line{
  display: flex !important;
  align-items: baseline;
  gap: 10px !important;
  justify-content: center;
  flex-wrap: wrap;
}
.command-center-today-agenda-item .command-center-today-time{
  font-size: .78rem !important;
  line-height: 1;
  font-weight: 800 !important;
  letter-spacing: .02em;
  color: var(--muted, #64748b) !important;
  white-space: nowrap;
  opacity: .9;
}
.command-center-today-agenda-item .command-center-agenda-main{
  font-size: 1rem;
  font-weight: 800;
}
.command-center-today-agenda-item.is-past .command-center-today-time,
.command-center-today-agenda-item.is-past .command-center-agenda-main{
  opacity: .55;
}
@media (max-width: 640px){
  .command-center-today-agenda-item .command-center-agenda-line{
    justify-content: flex-start;
  }
}


/* Safari/desktop fallback time picker for planner agenda fields */
.triptracker-time-fallback{
  cursor:pointer;
  color:#2563eb;
}
.triptracker-time-popover{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.32);
  backdrop-filter:blur(4px);
}
.triptracker-time-dialog{
  width:min(360px, 92vw);
  border:1px solid rgba(148,163,184,.35);
  border-radius:22px;
  background:var(--card-bg, #fff);
  color:var(--text, #0f172a);
  box-shadow:0 24px 60px rgba(15,23,42,.28);
  padding:18px;
}
.triptracker-time-title{
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:14px;
  opacity:.75;
}
.triptracker-time-controls{
  display:grid;
  grid-template-columns:1fr auto 1fr 1fr;
  gap:10px;
  align-items:center;
}
.triptracker-time-controls select{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.55);
  background:var(--input-bg, #fff);
  color:inherit;
  font-size:18px;
  font-weight:700;
  padding:8px 10px;
}
.triptracker-time-sep{
  font-weight:900;
  font-size:22px;
  opacity:.65;
}
.triptracker-time-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
.triptracker-time-actions button{
  border:1px solid rgba(148,163,184,.5);
  border-radius:999px;
  padding:10px 14px;
  font-weight:700;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.triptracker-time-actions .triptracker-time-save{
  border-color:transparent;
  background:#38bdf8;
  color:white;
}
body.dark .triptracker-time-dialog{
  background:#101827;
}


/* Trip Tracker time picker save feedback */
.triptracker-time-saved-flash{
  animation: tripTrackerTimeSavedFlash .75s ease both;
}
@keyframes tripTrackerTimeSavedFlash{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.0); }
  35%{ box-shadow:0 0 0 4px rgba(34,197,94,.22); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,.0); }
}
.triptracker-time-saved-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translate(-50%, 10px);
  z-index:100000;
  opacity:0;
  pointer-events:none;
  border-radius:999px;
  padding:10px 14px;
  font-size:.86rem;
  font-weight:800;
  color:#052e16;
  background:#86efac;
  box-shadow:0 14px 34px rgba(15,23,42,.22);
  transition:opacity .18s ease, transform .18s ease;
}
.triptracker-time-saved-toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

/* Command Center live timeline */
.command-center-live-timeline{
  border:1px solid var(--line, rgba(255,255,255,.10));
  border-radius:16px;
  padding:12px 14px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.command-center-live-timeline-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.command-center-live-timeline-head span{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  opacity:.74;
}
.command-center-live-timeline-head small{
  font-size:.72rem;
  color:var(--muted, #94a3b8);
}
.command-center-live-timeline-item{
  position:relative;
  display:flex;
  gap:10px;
  padding:8px 0 8px 2px;
  animation: commandCenterTimelineSlide .28s ease both;
}
.command-center-live-timeline-item + .command-center-live-timeline-item{
  border-top:1px solid rgba(148,163,184,.12);
}
.command-center-live-timeline-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:6px;
  flex:0 0 auto;
  background:rgba(148,163,184,.55);
  box-shadow:0 0 0 4px rgba(148,163,184,.08);
}
.command-center-live-timeline-item.current .command-center-live-timeline-dot,
.command-center-live-timeline-item.next .command-center-live-timeline-dot{
  background:#38bdf8;
  box-shadow:0 0 0 4px rgba(56,189,248,.16), 0 0 18px rgba(56,189,248,.26);
}
.command-center-live-timeline-item.current{
  border-radius:12px;
  margin:2px -4px;
  padding-left:6px;
  padding-right:6px;
  background:rgba(56,189,248,.08);
}
.command-center-live-timeline-copy{
  min-width:0;
  flex:1;
}
.command-center-live-timeline-main{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  font-weight:800;
}
.command-center-live-timeline-main small{
  color:var(--muted, #94a3b8);
  font-weight:800;
  white-space:nowrap;
}
.command-center-live-timeline-countdown{
  margin-top:2px;
  color:var(--muted, #94a3b8);
  font-size:.82rem;
  font-weight:700;
}
.command-center-live-timeline-item.past{
  opacity:.48;
}
@keyframes commandCenterTimelineSlide{
  from{ opacity:.78; transform:translateY(3px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (max-width:640px){
  .command-center-live-timeline-main{
    flex-direction:column;
    gap:2px;
  }
}

/* Command Center timeline-as-source polish */
.command-center-live-timeline.is-single-source{
  border-color:rgba(56,189,248,.18);
  background:linear-gradient(135deg, rgba(56,189,248,.06), rgba(168,85,247,.035));
}
.command-center-live-timeline-topline{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:2px;
}
.command-center-live-timeline-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:2px 7px;
  font-size:.68rem;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.08em;
  background:rgba(148,163,184,.14);
  color:var(--muted, #64748b);
}
.command-center-live-timeline-badge.current{
  background:rgba(34,197,94,.14);
  color:#16a34a;
}
.command-center-live-timeline-badge.next{
  background:rgba(56,189,248,.16);
  color:#0284c7;
}
.command-center-live-timeline-countdown-inline{
  font-size:.78rem;
  font-weight:800;
  color:var(--muted, #64748b);
}
.command-center-live-timeline-item.current{
  animation: commandCenterTimelineCurrentSwap .38s ease both, commandCenterTimelineCurrentGlow 2.6s ease-in-out infinite;
}
.command-center-live-timeline-item.next{
  border-radius:12px;
  margin:2px -4px;
  padding-left:6px;
  padding-right:6px;
  background:rgba(56,189,248,.035);
}
@keyframes commandCenterTimelineCurrentSwap{
  from{ opacity:.72; transform:translateY(5px) scale(.992); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes commandCenterTimelineCurrentGlow{
  0%,100%{ box-shadow:0 0 0 1px rgba(56,189,248,.10), 0 0 0 rgba(56,189,248,0); }
  50%{ box-shadow:0 0 0 1px rgba(56,189,248,.20), 0 0 24px rgba(56,189,248,.12); }
}

/* Command Center: make Today the center of gravity */
.command-center-primary-panel,
.command-center-today-panel,
.command-center-port-intelligence{
  position:relative;
}
.command-center-today-panel::before,
.command-center-port-intelligence::before{
  content:"";
  display:block;
  height:1px;
  margin:-2px 0 12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.45), rgba(168,85,247,.22), rgba(148,163,184,0));
}
.command-center-today-panel::before{
  height:2px;
  background:linear-gradient(90deg, rgba(56,189,248,.65), rgba(34,197,94,.28), rgba(148,163,184,0));
}
.command-center-port-intelligence::before{
  background:linear-gradient(90deg, rgba(168,85,247,.34), rgba(56,189,248,.22), rgba(148,163,184,0));
}
.command-center-port-intelligence .command-center-panel-head h3{
  letter-spacing:.11em;
}
.command-center-live-timeline-item.current{
  box-shadow:0 0 0 1px rgba(56,189,248,.28), 0 12px 34px rgba(56,189,248,.16), inset 3px 0 0 rgba(56,189,248,.78);
}
.command-center-live-timeline-item.current .command-center-live-timeline-dot{
  animation: commandCenterTimelineDotPulse 1.9s ease-in-out infinite;
}
@keyframes commandCenterTimelineDotPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 4px rgba(56,189,248,.16), 0 0 16px rgba(56,189,248,.28); }
  50%{ transform:scale(1.12); box-shadow:0 0 0 7px rgba(56,189,248,.10), 0 0 26px rgba(56,189,248,.38); }
}
@media (prefers-reduced-motion: reduce){
  .command-center-live-timeline-item.current,
  .command-center-live-timeline-item.current .command-center-live-timeline-dot{
    animation:none !important;
  }
}

/* =========================================================
   PATCH: Ports of Call mobile schedule layout
   Keeps Arrive / All aboard / Depart time fields inside the
   Edit Trip modal on iPhone/Android and gives each port row a
   cleaner stacked mobile rhythm.
   ========================================================= */
@media (max-width: 700px){
  .trip-modal-body,
  #trip-form .trip-form-section-ports{
    overflow-x: hidden !important;
  }

  #ports-list.ports-list{
    gap: 12px !important;
  }

  #ports-list .port-call-row,
  .trip-modal-body #ports-list .port-call-row{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px 10px !important;
    padding: 12px !important;
    overflow: hidden !important;
  }

  #ports-list .port-call-move{
    grid-column: 1;
    grid-row: 1;
    padding-top: 28px;
  }

  #ports-list .port-call-main{
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #ports-list .port-call-title{
    width: 100%;
    min-width: 0;
    gap: 10px;
  }

  #ports-list .port-call-name{
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.18;
    font-size: 1rem;
  }

  #ports-list .port-call-schedule{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding-left: 0 !important;
    margin-top: 8px !important;
  }

  #ports-list .port-call-time-field{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 84px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(148,163,184,.22);
    border-radius: 14px;
    background: rgba(15,23,42,.18);
  }

  body.light #ports-list .port-call-time-field{
    background: rgba(248,250,252,.82);
    border-color: rgba(148,163,184,.30);
  }

  #ports-list .port-call-time-field span{
    min-width: 0;
    font-size: .66rem !important;
    letter-spacing: .06em !important;
    line-height: 1.1;
  }

  #ports-list .port-call-time-field input{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    text-align: right !important;
  }

  #ports-list .port-call-time-field input::-webkit-date-and-time-value{
    text-align: right;
  }

  #ports-list .port-call-actions{
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding-top: 2px !important;
  }
}

@media (max-width: 390px){
  #ports-list .port-call-time-field{
    grid-template-columns: 76px minmax(0, 1fr) !important;
    padding: 7px 8px !important;
  }
  #ports-list .port-call-time-field input{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* PATCH: Command Center daily cruise brain port card */
.command-center-port-card{
  position:relative;
  overflow:hidden;
  animation: ttFadeSlideIn .32s ease both;
  background:linear-gradient(135deg, rgba(56,189,248,.075), rgba(34,197,94,.045), rgba(255,255,255,.025));
}
.command-center-port-card::before{
  content:"";
  display:block;
  height:2px;
  margin:-2px 0 14px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.72), rgba(34,197,94,.32), rgba(148,163,184,0));
}
.command-center-port-card.sea-day{
  background:linear-gradient(135deg, rgba(168,85,247,.07), rgba(56,189,248,.035), rgba(255,255,255,.025));
}
.command-center-port-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.command-center-port-card-eyebrow{
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
  color:var(--muted, #94a3b8);
}
.command-center-port-card h3{
  margin:4px 0 3px;
  font-size:1.18rem;
  line-height:1.18;
  letter-spacing:-.02em;
}
.command-center-port-card-subtitle{
  font-size:.86rem;
  color:var(--muted, #94a3b8);
  font-weight:750;
}
.command-center-port-card-badge{
  flex:0 0 auto;
  border:1px solid rgba(56,189,248,.32);
  border-radius:999px;
  padding:5px 9px;
  font-size:.7rem;
  font-weight:950;
  letter-spacing:.08em;
  color:#0369a1;
  background:rgba(56,189,248,.12);
}
.command-center-port-card-badge.muted{
  border-color:rgba(148,163,184,.25);
  color:var(--muted, #64748b);
  background:rgba(148,163,184,.08);
}
.command-center-port-card-times{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
}
.command-center-port-card-times.embarkation-day{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.command-center-port-card-times > div{
  border:1px solid rgba(148,163,184,.18);
  border-radius:15px;
  padding:11px 12px;
  background:rgba(255,255,255,.035);
  min-width:0;
}
.command-center-port-card-times > div.priority{
  box-shadow:inset 3px 0 0 rgba(56,189,248,.62);
  background:rgba(56,189,248,.07);
}
.command-center-port-card-times span{
  display:block;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted, #94a3b8);
  margin-bottom:4px;
}
.command-center-port-card-times strong{
  display:block;
  font-size:1rem;
  line-height:1.15;
  white-space:nowrap;
}
.command-center-port-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  color:var(--muted, #94a3b8);
  font-size:.82rem;
  line-height:1.35;
}
.command-center-port-card-edit{
  border:0;
  background:transparent;
  color:var(--accent, #38bdf8);
  font:inherit;
  font-size:.8rem;
  font-weight:900;
  padding:0;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:3px;
}
.command-center-port-card-edit:hover{ filter:brightness(1.08); }
body.light .command-center-port-card{
  background:linear-gradient(135deg, rgba(14,165,233,.09), rgba(34,197,94,.045), rgba(255,255,255,.8));
}
@media (max-width: 700px){
  .command-center-port-card-head{
    gap:10px;
  }
  .command-center-port-card h3{
    font-size:1.08rem;
  }
  .command-center-port-card-times{
    grid-template-columns:1fr;
    gap:8px;
  }
  .command-center-port-card-times > div{
    display:grid;
    grid-template-columns:104px minmax(0, 1fr);
    align-items:center;
    gap:8px;
    padding:10px 11px;
  }
  .command-center-port-card-times span{
    margin:0;
  }
  .command-center-port-card-times strong{
    text-align:right;
  }
  .command-center-port-card-footer{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* PATCH: Command Center flow — Live Timeline -> Today -> Today's Port -> Tomorrow -> Weather */
.command-center-insight-grid.command-center-insight-grid-priority{
  grid-template-areas:
    "primary support"
    "today today"
    "portcall portcall"
    "tomorrow tomorrow"
    "weather weather";
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-today-panel{
  grid-area: today;
  grid-column: 1 / -1;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-port-card{
  grid-area: portcall;
  grid-column: 1 / -1;
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support{
  grid-template-areas:
    "primary"
    "today"
    "portcall"
    "portintel"
    "tomorrow"
    "weather";
}
.command-center-port-card.command-center-panel{
  padding-top: 16px;
  padding-bottom: 14px;
}
.command-center-port-card::before{ margin-bottom: 10px; }
.command-center-port-card-times{ margin-top: 12px; }
.command-center-port-card-footer{ margin-top: 10px; }
@media (max-width: 900px){
  .command-center-insight-grid.command-center-insight-grid-priority{
    grid-template-areas:
      "primary"
      "support"
      "today"
      "portcall"
      "portintel"
      "tomorrow"
      "weather";
  }
}

/* PATCH: Mobile Command Center port card polish — keep it matching desktop */
.command-center-insight-grid.command-center-insight-grid-priority .command-center-today-panel{ grid-area: today !important; grid-column: 1 / -1 !important; }
.command-center-insight-grid.command-center-insight-grid-priority .command-center-port-card{ grid-area: portcall !important; grid-column: 1 / -1 !important; }
.command-center-insight-grid.command-center-insight-grid-priority .command-center-tomorrow-panel{ grid-area: tomorrow !important; grid-column: 1 / -1 !important; }

@media (max-width: 900px){
  .command-center-insight-grid.command-center-insight-grid-priority{
    grid-template-areas:
      "primary"
      "support"
      "today"
      "portcall"
      "tomorrow"
      "weather" !important;
  }
  .command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support{
    grid-template-areas:
      "primary"
      "today"
      "portcall"
      "tomorrow"
      "weather" !important;
  }
}

@media (max-width: 700px){
  .command-center-port-card.command-center-panel{
    padding:14px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    background:linear-gradient(135deg, rgba(56,189,248,.08), rgba(34,197,94,.045), rgba(255,255,255,.035)) !important;
    box-shadow:0 10px 26px rgba(15,23,42,.08) !important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body.light .command-center-port-card.command-center-panel{
    background:linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.045), rgba(255,255,255,.86)) !important;
  }
  .command-center-port-card::before{
    height:3px !important;
    margin:-2px 0 12px !important;
    background:linear-gradient(90deg, rgba(56,189,248,.78), rgba(34,197,94,.38), rgba(148,163,184,0)) !important;
  }
  .command-center-port-card-head{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  .command-center-port-card-eyebrow{
    display:block !important;
    margin:0 0 4px !important;
    font-size:.66rem !important;
    line-height:1.05 !important;
    font-weight:900 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    color:var(--muted, #64748b) !important;
  }
  .command-center-port-card h3{
    display:block !important;
    margin:0 0 4px !important;
    font-size:.86rem !important;
    line-height:1.16 !important;
    font-weight:950 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
    color:var(--text, #0f172a) !important;
    word-break:break-word !important;
  }
  .command-center-port-card-subtitle{
    display:block !important;
    font-size:.78rem !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    color:var(--muted, #64748b) !important;
  }
  .command-center-port-card-badge{
    flex:0 0 auto !important;
    border-radius:999px !important;
    padding:5px 9px !important;
    font-size:.66rem !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
  }
  .command-center-port-card-times{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
    margin-top:13px !important;
  }
  .command-center-port-card-times > div{
    display:block !important;
    min-width:0 !important;
    min-height:56px !important;
    padding:10px 10px !important;
    border-radius:14px !important;
    border:1px solid rgba(148,163,184,.22) !important;
    background:rgba(255,255,255,.42) !important;
  }
  body:not(.light) .command-center-port-card-times > div{
    background:rgba(15,23,42,.18) !important;
  }
  .command-center-port-card-times > div.priority{
    box-shadow:inset 3px 0 0 rgba(56,189,248,.72) !important;
    background:rgba(56,189,248,.10) !important;
  }
  .command-center-port-card-times span{
    display:block !important;
    margin:0 0 4px !important;
    font-size:.61rem !important;
    line-height:1.05 !important;
    font-weight:950 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    color:var(--muted, #64748b) !important;
  }
  .command-center-port-card-times strong{
    display:block !important;
    text-align:left !important;
    font-size:.88rem !important;
    line-height:1.1 !important;
    font-weight:950 !important;
    color:var(--text, #0f172a) !important;
    white-space:nowrap !important;
  }
  .command-center-port-card-footer{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-direction:row !important;
    gap:10px !important;
    margin-top:12px !important;
    font-size:.76rem !important;
    line-height:1.3 !important;
    color:var(--muted, #64748b) !important;
  }
  .command-center-port-card-footer span{
    min-width:0 !important;
  }
  .command-center-port-card-edit{
    flex:0 0 auto !important;
    border:0 !important;
    background:transparent !important;
    padding:0 !important;
    color:var(--accent, #38bdf8) !important;
    font-size:.76rem !important;
    font-weight:950 !important;
    white-space:nowrap !important;
    text-decoration:underline !important;
    text-underline-offset:3px !important;
  }
}

@media (max-width: 390px){
  .command-center-port-card.command-center-panel{ padding:13px !important; }
  .command-center-port-card-times{ gap:6px !important; }
  .command-center-port-card-times > div{ padding:9px 8px !important; border-radius:13px !important; }
  .command-center-port-card-times span{ font-size:.57rem !important; letter-spacing:.10em !important; }
  .command-center-port-card-times strong{ font-size:.82rem !important; }
  .command-center-port-card-footer{ align-items:flex-start !important; flex-direction:column !important; gap:8px !important; }
}

/* Live Timeline: completed departure state */
.command-center-live-timeline-badge.at-sea{
  background:rgba(14,165,233,.14);
  color:#0284c7;
}
.command-center-live-timeline-item.at-sea{
  border-radius:12px;
  margin:2px -4px;
  padding-left:6px;
  padding-right:6px;
  background:linear-gradient(135deg, rgba(14,165,233,.055), rgba(59,130,246,.035));
}

/* === PATCH: keep the custom time picker above the Edit Trip modal ===
   The Edit Trip backdrop uses a very high z-index. The shared Trip Tracker
   time picker must sit above it when editing Ports of Call times; otherwise
   the picker/port fields appear to fall underneath the modal layer. */
.triptracker-time-popover{
  z-index: 1000002 !important;
}
.triptracker-time-dialog{
  position: relative;
  z-index: 1000003 !important;
}
.triptracker-time-saved-toast{
  z-index: 1000004 !important;
}

/* PATCH: Remove redundant Today card now that Live Timeline shows NOW + next 3 */
.command-center-insight-grid.command-center-insight-grid-priority{
  grid-template-areas:
    "primary support"
    "portcall portcall"
    "tomorrow tomorrow"
    "weather weather" !important;
}
.command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support{
  grid-template-areas:
    "primary"
    "portcall"
    "tomorrow"
    "weather" !important;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-port-card{
  grid-area: portcall !important;
  grid-column: 1 / -1 !important;
}
.command-center-insight-grid.command-center-insight-grid-priority .command-center-tomorrow-panel{
  grid-area: tomorrow !important;
  grid-column: 1 / -1 !important;
}
@media (max-width: 900px){
  .command-center-insight-grid.command-center-insight-grid-priority{
    grid-template-areas:
      "primary"
      "support"
      "portcall"
      "tomorrow"
      "weather" !important;
  }
  .command-center-insight-grid.command-center-insight-grid-priority.command-center-no-support{
    grid-template-areas:
      "primary"
      "portcall"
      "tomorrow"
      "weather" !important;
  }
}

/* PATCH: Command Center switches Today's Port to At Sea / Next Port after departure */
.command-center-port-card.at-sea{
  background:linear-gradient(135deg, rgba(14,165,233,.085), rgba(99,102,241,.045), rgba(255,255,255,.025)) !important;
}
.command-center-port-card.at-sea::before{
  background:linear-gradient(90deg, rgba(14,165,233,.78), rgba(99,102,241,.38), rgba(148,163,184,0)) !important;
}
.command-center-port-card.at-sea .command-center-port-card-badge{
  border-color:rgba(14,165,233,.32);
  color:#0369a1;
  background:rgba(14,165,233,.12);
}
.command-center-port-card-times.at-sea-summary > div.priority{
  box-shadow:inset 3px 0 0 rgba(14,165,233,.7);
  background:rgba(14,165,233,.08);
}
@media (max-width: 720px){
  .command-center-port-card-times.at-sea-summary{
    grid-template-columns:1fr !important;
  }
}

/* PATCH: Command Center live hero + Live Activity polish */
.command-center-status-header.in-port-live .command-center-status-title,
.command-center-status-header.at-sea-live .command-center-status-title{
  letter-spacing:-.01em;
}
.command-center-status-header.at-sea-live{
  background:linear-gradient(135deg, rgba(14,165,233,.12), rgba(59,130,246,.07), rgba(168,85,247,.05));
  box-shadow:0 0 0 1px rgba(14,165,233,.12), 0 14px 34px rgba(14,165,233,.08);
}
.command-center-status-header.in-port-live{
  background:linear-gradient(135deg, rgba(34,197,94,.08), rgba(56,189,248,.08), rgba(168,85,247,.04));
}
.command-center-live-progress{
  height:4px;
  margin-top:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(148,163,184,.18);
}
.command-center-live-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.95), rgba(34,197,94,.85));
  transition:width .45s ease;
}
.command-center-live-timeline-item{
  animation-delay:calc(var(--timeline-index, 0) * 45ms);
}
.command-center-live-timeline-item.current{
  border-left:4px solid rgba(56,189,248,.9);
  padding-left:8px;
}
.command-center-live-timeline-item.past{
  animation:commandCenterTimelineFadeDone .32s ease both;
}
@keyframes commandCenterTimelineFadeDone{
  from{ opacity:1; transform:translateY(0); }
  to{ opacity:.28; transform:translateY(-4px); }
}
@media (max-width:640px){
  .command-center-status-header{
    padding:12px 13px;
  }
  .command-center-status-title{
    font-size:1rem;
    line-height:1.25;
  }
  .command-center-status-subtitle{
    font-size:.88rem;
  }
}

/* Command Center planner jump polish */
.command-center-live-timeline-item.is-clickable,
.command-center-tomorrow-panel.is-clickable,
.command-center-next-step-live.is-clickable{
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.command-center-live-timeline-item.is-clickable:hover,
.command-center-tomorrow-panel.is-clickable:hover,
.command-center-next-step-live.is-clickable:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(56, 189, 248, .14);
  border-color: rgba(56, 189, 248, .45);
}
.command-center-live-timeline-item.is-clickable:focus-visible,
.command-center-tomorrow-panel.is-clickable:focus-visible,
.command-center-next-step-live.is-clickable:focus-visible{
  outline: 3px solid rgba(56, 189, 248, .35);
  outline-offset: 2px;
}
.command-center-tomorrow-panel.is-clickable{
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.command-center-tap-hint{
  float: right;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--muted, #64748b);
  opacity: .75;
}
.agenda-day-card:target,
.planner-item.agenda-item:target{
  scroll-margin-top: 90px;
}


/* Command Center smart Next Step tones */
.command-center-next-step-live.tone-urgent{
  border-color: rgba(248, 113, 113, .45);
  background: linear-gradient(135deg, rgba(248,113,113,.13), rgba(251,191,36,.08));
  box-shadow: 0 0 0 1px rgba(248,113,113,.12), 0 12px 28px rgba(248,113,113,.10);
}
.command-center-next-step-live.tone-event{
  border-color: rgba(56,189,248,.42);
  background: linear-gradient(135deg, rgba(56,189,248,.12), rgba(129,140,248,.07));
}
.command-center-next-step-live.tone-sea{
  border-color: rgba(45,212,191,.38);
  background: linear-gradient(135deg, rgba(45,212,191,.11), rgba(56,189,248,.08));
}
.command-center-next-step-live.tone-port,
.command-center-next-step-live.tone-planning{
  border-color: rgba(168,85,247,.34);
  background: linear-gradient(135deg, rgba(168,85,247,.09), rgba(56,189,248,.07));
}
.command-center-next-step-live.tone-urgent::before{
  box-shadow: 0 0 0 1px rgba(248,113,113,.20), 0 0 26px rgba(248,113,113,.16);
}


/* PATCH: Premium Command Center micro-motion + assistant polish */
.command-center-live-timeline-badge.current{
  animation: commandCenterNowPillPulse 1.9s ease-in-out infinite;
}
@keyframes commandCenterNowPillPulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.22); }
  50%{ transform:scale(1.035); box-shadow:0 0 0 6px rgba(34,197,94,.08); }
}
.command-center-live-timeline-item.free_time{
  border-radius:12px;
  margin:2px -4px;
  padding-left:6px;
  padding-right:6px;
  background:linear-gradient(135deg, rgba(251,191,36,.08), rgba(56,189,248,.035));
}
.command-center-live-timeline-item.free_time .command-center-live-timeline-dot{
  background:#f59e0b;
  box-shadow:0 0 0 4px rgba(245,158,11,.12);
}
.command-center-live-timeline-badge.free_time{
  background:rgba(251,191,36,.14);
  color:#b45309;
}
.command-center-live-timeline-item.past{
  opacity:.4 !important;
  filter:saturate(.72);
}
.command-center-live-timeline-badge.past{
  background:rgba(148,163,184,.12);
  color:rgba(100,116,139,.9);
}
.command-center-live-progress span{
  position:relative;
  overflow:hidden;
  transition:width .7s cubic-bezier(.22,1,.36,1);
}
.command-center-live-progress span::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform:translateX(-100%);
  animation: commandCenterProgressShine 2.4s ease-in-out infinite;
}
@keyframes commandCenterProgressShine{
  0%{ transform:translateX(-100%); }
  45%,100%{ transform:translateX(130%); }
}
.command-center-port-card.command-center-panel{
  padding:clamp(12px, 1.7vw, 16px) !important;
}
.command-center-port-card::before{
  margin-bottom:8px !important;
}
.command-center-port-card-times{
  margin-top:10px !important;
}
.command-center-port-card-times > div{
  padding:9px 10px !important;
}
.command-center-port-card-footer{
  margin-top:9px !important;
}
.command-center-at-sea-tonight{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:9px 10px;
  border-radius:14px;
  border:1px solid rgba(56,189,248,.16);
  background:rgba(56,189,248,.055);
  font-size:.82rem;
}
.command-center-at-sea-tonight strong{
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--muted, #64748b);
}
.command-center-at-sea-tonight span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-weight:800;
}
.command-center-at-sea-tonight small{
  color:var(--muted, #64748b);
  font-weight:800;
}
.command-center-next-step-live.tone-urgent{
  border-color:rgba(251,146,60,.38);
  background:linear-gradient(135deg, rgba(251,146,60,.16), rgba(56,189,248,.07));
}
.command-center-next-step-live.tone-sea{
  border-color:rgba(14,165,233,.26);
  background:linear-gradient(135deg, rgba(14,165,233,.12), rgba(59,130,246,.06));
}
@media (prefers-reduced-motion: reduce){
  .command-center-live-timeline-badge.current,
  .command-center-live-progress span::after{
    animation:none !important;
  }
}

/* =========================================================
   UI CONSISTENCY PASS — shared design system layer
   Goal: make Dashboard, Trips, Planner, Cruise Log, modals,
   buttons, badges, rows, and Command Center feel like one app.
   Safe CSS-only patch: no app logic changed.
========================================================= */
:root{
  --tt-radius-xs: 10px;
  --tt-radius-sm: 12px;
  --tt-radius-md: 14px;
  --tt-radius-lg: 18px;
  --tt-radius-pill: 999px;
  --tt-space-1: 4px;
  --tt-space-2: 8px;
  --tt-space-3: 10px;
  --tt-space-4: 12px;
  --tt-space-5: 14px;
  --tt-space-6: 16px;
  --tt-ease: cubic-bezier(.2,.8,.2,1);
  --tt-focus: 0 0 0 3px rgba(56,189,248,.20);
  --tt-surface-glass: rgba(255,255,255,.045);
  --tt-surface-glass-2: rgba(255,255,255,.065);
  --tt-line-soft: rgba(148,163,184,.22);
}
body.light{
  --tt-surface-glass: rgba(255,255,255,.70);
  --tt-surface-glass-2: rgba(255,255,255,.86);
  --tt-line-soft: rgba(148,163,184,.42);
}

/* One shared card language across the app */
.card,
.kpi,
.trip-row,
.planner-card,
.planner-item,
.agenda-day-card,
.check-card,
.check-item,
.alerts-card,
.alerts-group,
.alerts-group-item,
.command-center-card,
.command-center-panel,
.command-center-priority-top,
.command-center-priority-row,
.command-center-port-intelligence,
.command-center-next-step,
.ports-stat,
.ports-leaderboard,
.ships-panel,
.port-stat-row,
.route-timeline-card,
.port-journal-card,
.modal,
.trip-modal{
  border-radius: var(--tt-radius-lg) !important;
  border: 1px solid var(--tt-line-soft) !important;
  box-shadow: var(--tt-card-shadow, 0 10px 24px rgba(0,0,0,.22)) !important;
}

.card,
.trip-row,
.planner-card,
.planner-item,
.check-card,
.check-item,
.alerts-card,
.alerts-group,
.alerts-group-item,
.command-center-panel,
.command-center-priority-top,
.command-center-priority-row,
.command-center-port-intelligence,
.ports-stat,
.ports-leaderboard,
.ships-panel,
.port-stat-row,
.route-timeline-card,
.port-journal-card{
  background: var(--tt-surface-glass) !important;
}
body.light .card,
body.light .trip-row,
body.light .planner-card,
body.light .planner-item,
body.light .check-card,
body.light .check-item,
body.light .alerts-card,
body.light .alerts-group,
body.light .alerts-group-item,
body.light .command-center-panel,
body.light .command-center-priority-top,
body.light .command-center-priority-row,
body.light .command-center-port-intelligence,
body.light .ports-stat,
body.light .ports-leaderboard,
body.light .ships-panel,
body.light .port-stat-row,
body.light .route-timeline-card,
body.light .port-journal-card{
  background: var(--tt-surface-glass-2) !important;
}

/* Shared section header rhythm */
.card-header,
.dashboard-overview-header,
.command-center-header,
.command-center-panel-head,
.trip-card-header,
.planner-section-header,
.alerts-group-header,
.ports-section-header,
.ships-panel-header{
  gap: var(--tt-space-3) !important;
  margin-bottom: var(--tt-space-3) !important;
}
.card-header h2,
.card-header h3,
.command-center-title-wrap h2,
.command-center-panel h3,
.planner-section-title,
.alerts-group-title,
.ships-panel-title,
.ports-leaderboard-title,
.port-journal-title{
  letter-spacing: -.01em;
}
.card-header small,
.help-text,
.hint,
.kpi-sub,
.command-center-empty,
.command-center-next-step .muted,
.trip-meta,
.planner-item-notes,
.alerts-group-subtitle{
  color: var(--muted) !important;
  line-height: 1.35 !important;
}

/* Buttons, tabs, links and icon buttons should share the same feel */
.btn,
.icon-btn,
.tab-btn,
.pill-link,
.port-btn,
.trip-planner-deck-btn,
.desktop-more-btn,
.desktop-user-btn{
  border-radius: var(--tt-radius-pill) !important;
  border: 1px solid var(--tt-line-soft) !important;
  transition: transform .16s var(--tt-ease), box-shadow .16s var(--tt-ease), filter .16s var(--tt-ease), background .16s var(--tt-ease), border-color .16s var(--tt-ease) !important;
}
.btn,
.icon-btn,
.pill-link,
.port-btn,
.trip-planner-deck-btn{
  min-height: 34px;
}
.btn-primary,
.tab-btn.active,
.trip-planner-deck-btn.primary{
  border-color: transparent !important;
  box-shadow: 0 8px 22px rgba(56,189,248,.22) !important;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,
  .icon-btn:hover,
  .tab-btn:hover,
  .pill-link:hover,
  .port-btn:hover,
  .trip-planner-deck-btn:hover{
    transform: translateY(-1px);
  }
}
.btn:focus-visible,
.icon-btn:focus-visible,
.tab-btn:focus-visible,
.pill-link:focus-visible,
.port-btn:focus-visible,
.trip-planner-deck-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none !important;
  box-shadow: var(--tt-focus) !important;
}

/* Forms: one input style everywhere */
input,
select,
textarea{
  border-radius: var(--tt-radius-sm) !important;
  border: 1px solid var(--tt-line-soft) !important;
  background: var(--input-bg) !important;
  color: var(--text) !important;
  transition: border-color .16s var(--tt-ease), box-shadow .16s var(--tt-ease), background .16s var(--tt-ease) !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color: rgba(56,189,248,.58) !important;
  background: var(--input-focus) !important;
}
label{
  font-weight: 700;
  letter-spacing: .02em;
}

/* Badges/chips/pills: consistent type and spacing */
.badge,
.chip,
.command-center-badge,
.command-center-health,
.command-center-next-tag,
.alerts-count-badge,
.doc-badge,
.exc-smart-badge,
.status-pill,
.lat-badge{
  border-radius: var(--tt-radius-pill) !important;
  border: 1px solid var(--tt-line-soft) !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

/* Lists/rows: consistent spacing and touch targets */
.trip-row,
.planner-item,
.check-item,
.alerts-group-item,
.port-stat-row,
.command-center-live-list-item,
.command-center-alert,
.command-center-today-item{
  min-height: 42px;
}
.trip-row,
.planner-item,
.check-item,
.alerts-group-item,
.port-stat-summary,
.command-center-priority-row,
.command-center-live-list-item.is-next{
  padding: 10px 12px !important;
}

/* Command Center should remain premium but not visually separate */
.command-center-card{
  border-radius: 20px !important;
}
.command-center-priority-panel,
.command-center-priority-stack,
.command-center-live-list,
.command-center-alert-list,
.command-center-today-list{
  gap: var(--tt-space-3) !important;
}
.command-center-next-step{
  padding: 11px 13px !important;
}
.command-center-port-intelligence,
.command-center-priority-top,
.command-center-priority-row{
  padding: 12px 14px !important;
}

/* Consistent top accent language for main analytic/product cards */
.kpi::before,
.ports-stat::before,
.command-center-card::before,
.card.card-accent::before{
  height: 3px !important;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
}

/* Modal surfaces match the rest of the product */
.modal,
.trip-modal{
  background: var(--card-bg) !important;
}
.modal-backdrop{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.trip-modal-footer-dock{
  border-top: 1px solid var(--tt-line-soft) !important;
}

/* Mobile consistency: compact but tappable */
@media (max-width: 720px){
  :root{
    --tt-space-3: 8px;
    --tt-space-4: 10px;
    --tt-space-5: 12px;
  }
  .card,
  .kpi,
  .trip-row,
  .planner-item,
  .agenda-day-card,
  .check-item,
  .alerts-group-item,
  .command-center-panel,
  .ports-stat,
  .ports-leaderboard,
  .ships-panel,
  .port-stat-row{
    border-radius: var(--tt-radius-md) !important;
  }
  .btn,
  .icon-btn,
  .tab-btn,
  .pill-link,
  .port-btn{
    min-height: 38px;
  }
  .command-center-card{
    border-radius: 18px !important;
  }
}

/* Premium Latitude progress KPI */
.kpi-points-next .kpi-label,
#kpi-latitude-next-label{
  letter-spacing:.18em;
  text-transform:uppercase;
}
.kpi-points-next .kpi-sub:empty{
  display:none;
}
.lat-tracker-premium{
  margin-top:10px;
}
.lat-progress-line{
  display:flex;
  align-items:center;
  gap:10px;
}
.lat-tracker-premium .lat-track{
  flex:1;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.28);
  background:rgba(15,23,42,.12);
  box-shadow: inset 0 1px 2px rgba(15,23,42,.10);
}
body.dark .lat-tracker-premium .lat-track{
  background:rgba(255,255,255,.08);
  border-color:rgba(148,163,184,.28);
}
.lat-tracker-premium .lat-fill{
  background:linear-gradient(90deg, var(--accent), #38bdf8, var(--accent-2));
  box-shadow:0 0 14px rgba(56,189,248,.38);
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
.lat-tracker-percent{
  min-width:34px;
  text-align:right;
  font-size:.72rem;
  font-weight:800;
  color:var(--muted);
  line-height:1;
}
.lat-tracker-premium .lat-tracker-meta{
  margin-top:6px;
  font-size:.72rem;
  color:var(--muted);
  letter-spacing:.01em;
}

/* Notification Settings modal */
.notification-settings-backdrop{
  position:fixed;
  inset:0;
  z-index:10060;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(10px);
}
.notification-settings-modal{
  width:min(620px, calc(100vw - 28px));
  max-height:min(82vh, 760px);
  overflow:auto;
  border-radius:28px;
  border:1px solid rgba(148,163,184,.36);
  background:var(--card);
  color:var(--text);
  box-shadow:0 26px 80px rgba(15,23,42,.32);
}
.notification-settings-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid rgba(148,163,184,.22);
}
.notification-settings-header h3{ margin:0; font-size:1.35rem; }
.notification-settings-header p{ margin:4px 0 0; color:var(--muted); }
.notification-settings-close{ width:44px; height:44px; border-radius:999px; padding:0; }
.notification-settings-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 24px;
}
.notification-status-card,
.notification-ios-note,
.notification-toggle-row{
  border:1px solid rgba(148,163,184,.28);
  background:rgba(255,255,255,.58);
  border-radius:18px;
}
[data-theme="dark"] .notification-status-card,
[data-theme="dark"] .notification-ios-note,
[data-theme="dark"] .notification-toggle-row{
  background:rgba(15,23,42,.62);
}
.notification-status-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
}
.notification-status-card span{ color:var(--muted); font-weight:700; }
.notification-status-card[data-state="granted"] span{ color:#16a34a; }
.notification-status-card[data-state="denied"],
.notification-status-card[data-state="unsupported"]{ border-color:rgba(248,113,113,.42); }
.notification-ios-note{
  padding:12px 14px;
  color:var(--muted);
  font-size:.92rem;
}
.notification-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px;
}
.notification-toggle-row span{ display:flex; flex-direction:column; gap:3px; }
.notification-toggle-row small{ color:var(--muted); }
.notification-toggle-row input{
  width:22px;
  height:22px;
  accent-color:#38bdf8;
  flex:0 0 auto;
}
.notification-settings-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 24px 22px;
  border-top:1px solid rgba(148,163,184,.18);
}
@media (max-width:760px){
  .notification-settings-backdrop{ align-items:flex-end; padding:0; }
  .notification-settings-modal{
    width:100%;
    max-height:88vh;
    border-radius:28px 28px 0 0;
    border-bottom:0;
  }
  .notification-settings-header,
  .notification-settings-body,
  .notification-settings-actions{ padding-left:20px; padding-right:20px; }
  .notification-settings-actions{ flex-direction:column; }
  .notification-settings-actions .btn{ width:100%; }
}

/* Mobile bottom tab bar viewport pin patch (iPhone/Android PWA) */
@media (max-width: 640px){
  html{ min-height:100%; }
  body{ min-height:100svh; }
  .mobile-tabbar{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    transform: translate3d(0,0,0);
    will-change: transform;
    z-index: 2147483000 !important;
    padding-bottom: max(env(safe-area-inset-bottom), 0px) !important;
    height: calc(66px + max(env(safe-area-inset-bottom), 0px)) !important;
  }
  body{ padding-bottom: calc(66px + max(env(safe-area-inset-bottom), 0px)) !important; }
  main{ padding-bottom: calc(96px + max(env(safe-area-inset-bottom), 0px)) !important; }
}

/* Notification Settings theme consistency patch
   Keeps the notification modal aligned with the site light/dark theme. */
.notification-settings-backdrop{
  background: rgba(2, 6, 23, .52);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.notification-settings-modal{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--surface-border) !important;
}
.notification-settings-header,
.notification-settings-actions{
  background: color-mix(in srgb, var(--surface-2) 86%, transparent);
  border-color: var(--border) !important;
}
.notification-settings-header h3,
.notification-status-card strong,
.notification-toggle-row strong{
  color: var(--text) !important;
}
.notification-settings-header p,
.notification-ios-note,
.notification-toggle-row small{
  color: var(--muted) !important;
}
.notification-status-card,
.notification-ios-note,
.notification-toggle-row{
  background: var(--row-bg) !important;
  border-color: var(--row-border) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.notification-status-card span{
  color: var(--muted) !important;
}
.notification-status-card[data-state="granted"] span{
  color: var(--success) !important;
}
.notification-toggle-row input{
  accent-color: var(--accent);
}
.notification-settings-close{
  background: var(--chip-bg) !important;
  border: 1px solid var(--surface-border) !important;
  color: var(--text) !important;
}
.notification-settings-actions .btn,
.notification-settings-actions button{
  color: var(--text);
}
body.light .notification-settings-backdrop{
  background: rgba(15, 23, 42, .28);
}
body.light .notification-settings-modal{
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 26px 80px rgba(15,23,42,.22);
}
body.light .notification-status-card,
body.light .notification-ios-note,
body.light .notification-toggle-row{
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}

/* =========================================================
   PATCH: Trip Edit modal footer should never hide behind mobile tab bar
   Keeps Cancel / Save Trip visible on iPhone + Android PWAs.
========================================================= */
@media (max-width: 820px){
  /* The trip modal is an app-level sheet; it must sit above the mobile tab bar. */
  #trip-modal-backdrop{
    z-index: 2147483000 !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 8px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    align-items: flex-end !important;
  }

  /* Hide the site bottom nav while the Edit/Add Trip sheet is open. */
  #trip-modal-backdrop[aria-hidden="false"] ~ .mobile-tabbar{
    display: none !important;
  }

  #trip-modal-backdrop .modal.trip-modal{
    width: min(760px, 100%) !important;
    max-height: calc(100svh - max(16px, env(safe-area-inset-top, 0px)) - max(16px, env(safe-area-inset-bottom, 0px))) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
  }

  #trip-modal-backdrop .trip-modal-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 16px !important;
  }

  #trip-modal-backdrop .trip-modal-footer-dock{
    flex: 0 0 auto !important;
    display: block;
    position: relative !important;
    z-index: 20 !important;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(148,163,184,.24) !important;
    box-shadow: 0 -10px 28px rgba(15,23,42,.18) !important;
  }

  #trip-modal-backdrop .trip-modal-footer-dock > div{
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
  }

  #trip-modal-backdrop .trip-modal-footer-dock .btn{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 46px !important;
  }
}

/* =========================================================
   PATCH: Notification Settings footer safe area
   Keeps Enable / Save Settings above the iPhone bottom bar and site tab bar.
========================================================= */
@media (max-width: 820px){
  #notification-settings-backdrop.notification-settings-backdrop{
    z-index: 2147483600 !important;
    align-items: flex-end !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) 0 0 !important;
  }

  #notification-settings-backdrop .notification-settings-modal{
    width: 100% !important;
    max-height: calc(100svh - max(10px, env(safe-area-inset-top, 0px))) !important;
    border-radius: 28px 28px 0 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #notification-settings-backdrop .notification-settings-header{
    flex: 0 0 auto !important;
  }

  #notification-settings-backdrop .notification-settings-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 18px !important;
  }

  #notification-settings-backdrop .notification-settings-actions{
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 5 !important;
    padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    background: color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
    box-shadow: 0 -12px 30px rgba(15,23,42,.16) !important;
  }
}

/* =========================================================
   PATCH: View Notifications screen
   Adds a clean notification inbox/status panel separate from settings.
========================================================= */
.notification-view-backdrop{
  position:fixed;
  inset:0;
  z-index:2147483600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.52);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.notification-view-modal{
  width:min(680px, calc(100vw - 28px));
  max-height:min(84vh, 800px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:28px;
  border:1px solid var(--surface-border);
  background:var(--surface-2);
  color:var(--text);
  box-shadow:0 26px 80px rgba(15,23,42,.32);
}
.notification-view-header,
.notification-view-actions{
  flex:0 0 auto;
  padding:20px 24px;
  background:color-mix(in srgb, var(--surface-2) 88%, transparent);
  border-color:var(--border);
}
.notification-view-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--border);
}
.notification-view-header h3{ margin:0; font-size:1.35rem; color:var(--text); }
.notification-view-header p{ margin:4px 0 0; color:var(--muted); }
.notification-view-close{ width:44px; height:44px; border-radius:999px; padding:0; }
.notification-view-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 24px;
}
.notification-view-loading,
.notification-empty{
  color:var(--muted);
  font-weight:700;
  padding:12px 2px;
}
.notification-status-strip,
.notification-view-card{
  border:1px solid var(--row-border);
  background:var(--row-bg);
  border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.13);
}
.notification-status-strip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
}
.notification-status-strip strong,
.notification-view-card strong{ color:var(--text); }
.notification-status-strip small,
.notification-reminder-row small,
.notification-sent-row small{ display:block; margin-top:3px; color:var(--muted); font-weight:700; }
.notification-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  background:var(--success, #22c55e);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
  flex:0 0 auto;
}
.notification-view-card{ padding:14px; }
.notification-card-title{
  font-size:.84rem;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.notification-reminder-row{
  width:100%;
  border:1px solid var(--row-border);
  background:color-mix(in srgb, var(--row-bg) 88%, transparent);
  color:var(--text);
  border-radius:16px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  cursor:pointer;
  margin-top:8px;
}
.notification-reminder-row--next{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--row-border));
  box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 16%, transparent);
}
.notification-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 9px;
  font-size:.72rem;
  font-weight:900;
  border:1px solid var(--row-border);
  color:var(--muted);
  background:var(--chip-bg);
}
.notification-pill--scheduled{ color:var(--success, #16a34a); }
.notification-pill--soon{ color:#f59e0b; }
.notification-pill--due{ color:var(--accent); }
.notification-pill--missed{ color:#ef4444; }
.notification-sent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-top:1px solid var(--row-border);
}
.notification-sent-row:first-of-type{ border-top:0; padding-top:0; }
.notification-sent-row > span{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
  color:var(--success, #22c55e);
  font-weight:900;
  flex:0 0 auto;
}
.notification-view-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--border);
}
body.light .notification-view-backdrop{ background:rgba(15,23,42,.28); }
body.light .notification-view-modal{ background:rgba(255,255,255,.96); box-shadow:0 26px 80px rgba(15,23,42,.22); }
body.light .notification-status-strip,
body.light .notification-view-card{ background:rgba(255,255,255,.82); box-shadow:0 10px 24px rgba(15,23,42,.08); }
@media (max-width:820px){
  .notification-view-backdrop{
    align-items:flex-end;
    padding:max(8px, env(safe-area-inset-top, 0px)) 0 0;
  }
  .notification-view-modal{
    width:100%;
    max-height:calc(100svh - max(10px, env(safe-area-inset-top, 0px)));
    border-radius:28px 28px 0 0;
    border-bottom:0;
  }
  .notification-view-header,
  .notification-view-body,
  .notification-view-actions{ padding-left:20px; padding-right:20px; }
  .notification-view-actions{
    position:sticky;
    bottom:0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    flex-direction:column;
    box-shadow:0 -12px 30px rgba(15,23,42,.16);
  }
  .notification-view-actions .btn{ width:100%; }
}

/* =========================================================
   PATCH: View Notifications should open as a real modal sheet
   Matches Notification Settings instead of rendering as a side panel.
========================================================= */
.notification-view-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483200 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2, 6, 23, .52);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}
.notification-view-modal{
  width:min(640px, calc(100vw - 28px));
  max-height:min(86vh, 780px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:28px;
  border:1px solid var(--surface-border, rgba(148,163,184,.36));
  background:var(--surface-2, var(--card));
  color:var(--text);
  box-shadow:0 26px 80px rgba(15,23,42,.34);
}
.notification-view-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:22px 24px 16px;
  border-bottom:1px solid var(--border, rgba(148,163,184,.22));
  background:color-mix(in srgb, var(--surface-2, var(--card)) 86%, transparent);
}
.notification-view-header h3{
  margin:0;
  font-size:1.45rem;
  line-height:1.1;
  color:var(--text) !important;
}
.notification-view-header p{
  margin:6px 0 0;
  color:var(--muted) !important;
  line-height:1.35;
}
.notification-view-close{
  width:44px;
  height:44px;
  min-width:44px;
  border-radius:999px;
  padding:0;
  background:var(--chip-bg, rgba(255,255,255,.72)) !important;
  border:1px solid var(--surface-border, rgba(148,163,184,.36)) !important;
  color:var(--text) !important;
}
.notification-view-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 24px;
}
.notification-view-loading,
.notification-empty{
  padding:12px 14px;
  border-radius:16px;
  color:var(--muted);
  background:var(--row-bg, rgba(255,255,255,.58));
  border:1px solid var(--row-border, rgba(148,163,184,.24));
}
.notification-status-strip,
.notification-view-card{
  border:1px solid var(--row-border, rgba(148,163,184,.28));
  background:var(--row-bg, rgba(255,255,255,.58));
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.notification-status-strip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
}
.notification-status-strip strong,
.notification-card-title,
.notification-reminder-row strong,
.notification-sent-row strong{
  color:var(--text) !important;
}
.notification-status-strip small,
.notification-reminder-row small,
.notification-sent-row small{
  display:block;
  margin-top:3px;
  color:var(--muted) !important;
}
.notification-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  flex:0 0 auto;
  background:var(--success, #22c55e);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--success, #22c55e) 18%, transparent);
}
.notification-view-card{
  padding:14px;
}
.notification-card-title{
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.82rem;
  margin-bottom:10px;
}
.notification-reminder-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--row-border, rgba(148,163,184,.24));
  background:color-mix(in srgb, var(--row-bg, rgba(255,255,255,.7)) 80%, transparent);
  color:var(--text);
  cursor:pointer;
}
.notification-reminder-row + .notification-reminder-row{
  margin-top:8px;
}
.notification-reminder-row--next{
  border-color:color-mix(in srgb, var(--accent, #38bdf8) 42%, var(--row-border, rgba(148,163,184,.24)));
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent, #38bdf8) 14%, transparent), color-mix(in srgb, var(--row-bg, rgba(255,255,255,.7)) 88%, transparent));
}
.notification-pill{
  flex:0 0 auto;
  border-radius:999px;
  padding:6px 9px;
  font-size:.72rem;
  font-weight:900;
  white-space:nowrap;
  border:1px solid rgba(148,163,184,.24);
  background:var(--chip-bg, rgba(255,255,255,.72));
  color:var(--muted);
}
.notification-pill--soon,
.notification-pill--due{
  color:var(--accent-strong, #0284c7);
  border-color:color-mix(in srgb, var(--accent, #38bdf8) 44%, transparent);
  background:color-mix(in srgb, var(--accent, #38bdf8) 12%, var(--chip-bg, rgba(255,255,255,.72)));
}
.notification-pill--missed{
  color:#ef4444;
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.10);
}
.notification-sent-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px 0;
  border-top:1px solid var(--row-border, rgba(148,163,184,.20));
}
.notification-sent-row:first-of-type{
  border-top:0;
  padding-top:0;
}
.notification-sent-row > span{
  color:var(--success, #22c55e);
  font-weight:900;
}
.notification-view-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 24px 22px;
  border-top:1px solid var(--border, rgba(148,163,184,.18));
  background:color-mix(in srgb, var(--surface-2, var(--card)) 90%, transparent);
}
.notification-view-actions .btn,
.notification-view-actions button{
  color:var(--text);
}
body.light .notification-view-backdrop{
  background:rgba(15, 23, 42, .28);
}
body.light .notification-view-modal{
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 26px 80px rgba(15,23,42,.22);
}
body.light .notification-status-strip,
body.light .notification-view-card,
body.light .notification-view-loading,
body.light .notification-empty{
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
@media (max-width:760px){
  .notification-view-backdrop{
    align-items:flex-end;
    padding:0;
  }
  .notification-view-modal{
    width:100%;
    max-height:88svh;
    border-radius:28px 28px 0 0;
    border-bottom:0;
  }
  .notification-view-header,
  .notification-view-body,
  .notification-view-actions{
    padding-left:20px;
    padding-right:20px;
  }
  .notification-view-actions{
    flex-direction:column;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .notification-view-actions .btn{
    width:100%;
    min-height:46px;
  }
  body.notification-view-open .mobile-tabbar{
    display:none !important;
  }
}


/* ===== Share / Import Trip Template ===== */
.trip-template-backdrop{
  position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(15,23,42,.52); backdrop-filter:blur(8px);
}
.trip-template-modal{
  width:min(560px, 100%); max-height:min(84vh, 720px); overflow:auto;
  border-radius:24px; padding:18px; border:1px solid var(--border, rgba(148,163,184,.35));
  background:var(--card, #fff); color:var(--text, #0f172a); box-shadow:0 24px 80px rgba(2,6,23,.35);
}
.trip-template-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:8px; }
.trip-template-modal h2{ margin:2px 0 0; font-size:1.25rem; line-height:1.15; }
.trip-template-kicker{ font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted, #64748b); }
.trip-template-copy{ margin:8px 0 14px; color:var(--muted, #64748b); line-height:1.45; }
.trip-template-includes{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0 14px; }
.trip-template-includes > div{ border:1px solid var(--border, rgba(148,163,184,.35)); border-radius:16px; padding:12px; background:var(--soft, rgba(148,163,184,.08)); line-height:1.35; }
.trip-template-label{ display:block; margin:10px 0 6px; font-weight:800; font-size:.88rem; }
.trip-template-link,.trip-template-import-input{
  width:100%; min-height:92px; resize:vertical; border-radius:16px; padding:12px;
  border:1px solid var(--border, rgba(148,163,184,.35)); background:var(--input-bg, rgba(255,255,255,.82)); color:inherit;
  font:inherit; box-sizing:border-box;
}
.trip-template-meta{ margin-top:8px; font-size:.84rem; color:var(--muted, #64748b); }
.trip-template-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap; }
.trip-template-error{ margin-top:10px; border-radius:14px; padding:10px 12px; background:rgba(239,68,68,.12); color:#b91c1c; font-weight:700; }
@media (max-width:640px){
  .trip-template-backdrop{ align-items:flex-end; padding:0; }
  .trip-template-modal{ width:100%; max-height:88vh; border-radius:24px 24px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .trip-template-includes{ grid-template-columns:1fr; }
  .trip-template-actions .btn{ flex:1; }
}


/* ===== PATCH: Share Trip Starter must open as a true modal popup ===== */
#trip-template-share-backdrop.trip-template-backdrop{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  margin:0 !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(15,23,42,.52) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
  box-sizing:border-box !important;
}
#trip-template-share-backdrop .trip-template-modal{
  position:relative !important;
  width:min(560px, calc(100vw - 36px)) !important;
  max-width:560px !important;
  max-height:min(84dvh, 720px) !important;
  overflow:auto !important;
  border-radius:24px !important;
  transform:none !important;
}
body.trip-template-modal-open .mobile-tabbar{ display:none !important; }
@media (max-width:640px){
  #trip-template-share-backdrop.trip-template-backdrop{
    align-items:flex-end !important;
    padding:0 !important;
  }
  #trip-template-share-backdrop .trip-template-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:88dvh !important;
    border-radius:24px 24px 0 0 !important;
  }
}


/* ===== PATCH: Share Trip Starter follows light/dark theme + privacy-safe modal styling ===== */
#trip-template-share-backdrop .trip-template-modal,
#trip-template-import-backdrop .trip-template-modal{
  background:var(--card-bg) !important;
  color:var(--text) !important;
  border:1px solid var(--card-border) !important;
  box-shadow:var(--card-shadow), 0 24px 80px rgba(2,6,23,.32) !important;
}
#trip-template-share-backdrop .trip-template-copy,
#trip-template-share-backdrop .trip-template-meta,
#trip-template-share-backdrop .trip-template-kicker,
#trip-template-import-backdrop .trip-template-copy,
#trip-template-import-backdrop .trip-template-meta,
#trip-template-import-backdrop .trip-template-kicker{
  color:var(--muted) !important;
}
#trip-template-share-backdrop .trip-template-includes > div,
#trip-template-import-backdrop .trip-template-includes > div{
  background:var(--row-bg) !important;
  border-color:var(--card-border) !important;
  color:var(--text) !important;
}
#trip-template-share-backdrop .trip-template-link,
#trip-template-import-backdrop .trip-template-import-input{
  background:var(--input-bg) !important;
  color:var(--text) !important;
  border-color:var(--card-border) !important;
}
#trip-template-share-backdrop .trip-template-close,
#trip-template-share-backdrop .trip-template-cancel,
#trip-template-import-backdrop .trip-template-close,
#trip-template-import-backdrop .trip-template-cancel{
  background:var(--chip-bg) !important;
  color:var(--text) !important;
  border-color:var(--card-border) !important;
}
body.light #trip-template-share-backdrop.trip-template-backdrop,
body.light #trip-template-import-backdrop.trip-template-backdrop{
  background:rgba(15,23,42,.30) !important;
}
body:not(.light) #trip-template-share-backdrop.trip-template-backdrop,
body:not(.light) #trip-template-import-backdrop.trip-template-backdrop{
  background:rgba(2,6,23,.66) !important;
}

/* ===== PATCH: Protected Trip Starter Library ===== */
.trip-template-password,
.trip-starter-password-input{
  width:100%;
  min-height:42px;
  border-radius:14px;
  border:1px solid var(--card-border, rgba(148,163,184,.35));
  background:var(--input-bg, var(--card-bg, #fff));
  color:var(--text, #0f172a);
  padding:10px 12px;
  box-sizing:border-box;
}
.trip-template-copy.small{font-size:.88rem; opacity:.82; margin-top:6px;}
.trip-template-divider{border:0; border-top:1px solid var(--card-border, rgba(148,163,184,.25)); margin:14px 0;}
.trip-starter-library-list{display:grid; gap:10px; margin:12px 0; max-height:340px; overflow:auto; padding-right:2px;}
.trip-starter-library-card{
  border:1px solid var(--card-border, rgba(148,163,184,.35));
  background:var(--card-bg, #fff);
  color:var(--text, #0f172a);
  border-radius:18px;
  padding:12px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}
.trip-starter-library-card.is-focused{outline:2px solid var(--accent, #2563eb); outline-offset:2px;}
.trip-starter-library-title{font-weight:800; font-size:1rem; margin-bottom:3px;}
.trip-starter-library-meta{font-size:.88rem; opacity:.82;}
.trip-starter-library-route{font-size:.82rem; opacity:.72; margin-top:5px; line-height:1.35;}
.trip-starter-unlock-row{display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; align-items:center;}
.trip-starter-card-error,.trip-template-error{color:#b91c1c; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35); border-radius:12px; padding:8px 10px; margin-top:8px; font-size:.88rem;}
.trip-template-empty{border:1px dashed var(--card-border, rgba(148,163,184,.45)); border-radius:16px; padding:14px; opacity:.75; text-align:center;}
@media (max-width:640px){
  .trip-starter-unlock-row{grid-template-columns:1fr;}
  .trip-template-actions{gap:8px; flex-wrap:wrap;}
  .trip-template-actions .btn{flex:1 1 auto;}
}

/* Protected Trip Starter Library remove-share action */
.trip-starter-delete-btn{
  color:var(--danger, #dc2626);
  border-color:rgba(220,38,38,.28);
  background:rgba(220,38,38,.08);
}
.trip-starter-delete-btn:hover{
  background:rgba(220,38,38,.14);
}
@media (min-width: 641px){
  .trip-starter-unlock-row:has(.trip-starter-delete-btn){
    grid-template-columns:1fr auto auto;
  }
}

/* Share Trip Starter remove action */
.trip-template-remove-protected-btn{
  color:#b42318;
  border-color:rgba(244,63,94,.35);
  background:rgba(244,63,94,.08);
}
body.dark .trip-template-remove-protected-btn,
.dark .trip-template-remove-protected-btn{
  color:#fecaca;
  border-color:rgba(248,113,113,.35);
  background:rgba(127,29,29,.28);
}
.trip-template-remove-protected-btn:hover{ filter:brightness(.98); }

/* Change Password modal */
.change-password-backdrop{
  position:fixed; inset:0; z-index:10050;
  display:none; align-items:center; justify-content:center;
  padding:22px;
  background:rgba(15,23,42,.42);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.change-password-modal{
  width:min(520px, 100%);
  max-height:min(88vh, 720px);
  overflow:auto;
  border-radius:26px;
  padding:20px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(148,163,184,.55);
  box-shadow:0 24px 70px rgba(15,23,42,.26);
  color:#071024;
}
body.dark .change-password-modal,
.dark .change-password-modal{
  background:linear-gradient(145deg, rgba(15,23,42,.98), rgba(30,41,59,.96));
  border-color:rgba(148,163,184,.32);
  color:#f8fafc;
}
.change-password-header{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px;}
.change-password-header h3{margin:0; font-size:1.55rem; line-height:1.1;}
.change-password-header p{margin:8px 0 0; color:#64748b; font-weight:700;}
body.dark .change-password-header p,
.dark .change-password-header p{color:#cbd5e1;}
.change-password-body{display:grid; gap:9px;}
.change-password-label{font-weight:900; color:#475569; letter-spacing:.04em; font-size:.82rem; text-transform:uppercase; margin-top:8px;}
body.dark .change-password-label,
.dark .change-password-label{color:#cbd5e1;}
.change-password-input{
  width:100%; box-sizing:border-box;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.72);
  padding:13px 14px;
  font:inherit;
  font-weight:800;
  background:rgba(255,255,255,.9);
  color:#071024;
  outline:none;
}
.change-password-input:focus{border-color:#38bdf8; box-shadow:0 0 0 4px rgba(56,189,248,.16);}
body.dark .change-password-input,
.dark .change-password-input{background:rgba(15,23,42,.72); border-color:rgba(148,163,184,.42); color:#f8fafc;}
.change-password-message{min-height:24px; font-weight:900; margin-top:6px;}
.change-password-message.error{color:#dc2626;}
.change-password-message.success{color:#16a34a;}
.change-password-message.info{color:#0284c7;}
.change-password-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap;}
@media (max-width: 640px){
  .change-password-backdrop{align-items:flex-end; padding:0;}
  .change-password-modal{width:100%; max-height:88vh; border-radius:28px 28px 0 0; padding:20px max(18px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right));}
  .change-password-actions .btn{flex:1 1 auto;}
}

/* Tab-focus login/logout sync toast */
.triptracker-focus-toast{
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(16px);
  z-index: 1000000;
  opacity: 0;
  pointer-events: none;
  max-width: min(92vw, 460px);
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.92);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 20px 45px rgba(15,23,42,.28);
  transition: opacity .22s ease, transform .22s ease;
}
.triptracker-focus-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.triptracker-focus-toast.ok{ background: rgba(16,185,129,.95); }
.triptracker-focus-toast.warn{ background: rgba(245,158,11,.96); }
body.dark .triptracker-focus-toast,
html.dark .triptracker-focus-toast{
  border-color: rgba(255,255,255,.16);
  background: rgba(2,6,23,.94);
}


/* === Trip Tracker patch: visible labels for iPhone time inputs === */
.planner-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:100%;
  min-width:0;
}
.planner-field > span{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding-left:4px;
  line-height:1.1;
}
.planner-field > input,
.planner-field > select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.planner-add .planner-field,
.agenda-edit-grid .planner-field,
.exc-edit-grid .planner-field{
  margin:0;
}
@media (max-width:600px){
  .planner-field > span{ font-size:.76rem; }
  .planner-field > input[type="time"]{ min-height:48px; }
}

/* Daily Agenda calendar export polish */
.planner-section-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 10px;
}
.planner-section-title-row h4{ margin:0; }
.planner-ag-export-all{
  font-size:.72rem;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.icon-btn.agenda-cal{
  color:var(--accent);
}
@media (max-width:520px){
  .planner-section-title-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .planner-ag-export-all{
    width:100%;
  }
}

/* Global unsaved modal guard */
.tt-unsaved-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overscroll-behavior:contain;
  touch-action:none;
}
.tt-unsaved-confirm-card{
  width:min(430px, 94vw);
  border-radius:22px;
  padding:20px;
  background:var(--surface, #111827);
  color:var(--text, #f8fafc);
  border:1px solid var(--surface-border, rgba(148,163,184,.25));
  box-shadow:0 24px 70px rgba(0,0,0,.38);
  text-align:left;
}
body.light .tt-unsaved-confirm-card,
.light .tt-unsaved-confirm-card{
  background:#ffffff;
  color:#0f172a;
  border-color:rgba(15,23,42,.12);
  box-shadow:0 24px 70px rgba(15,23,42,.22);
}
.tt-unsaved-confirm-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:rgba(245,158,11,.14);
  margin-bottom:10px;
}
.tt-unsaved-confirm-card h3{
  margin:0 0 6px;
  font-size:1.15rem;
}
.tt-unsaved-confirm-card p{
  margin:0;
  color:var(--muted, #94a3b8);
  line-height:1.45;
}
body.light .tt-unsaved-confirm-card p,
.light .tt-unsaved-confirm-card p{ color:#64748b; }
.tt-unsaved-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
@media (max-width: 640px){
  .tt-unsaved-confirm-overlay{ align-items:flex-end; padding:12px; }
  .tt-unsaved-confirm-card{ width:100%; border-radius:22px 22px max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-bottom)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .tt-unsaved-confirm-actions{ display:grid; grid-template-columns:1fr; }
  .tt-unsaved-confirm-actions .btn{ width:100%; }
}

#trip-modal-backdrop,
.trip-template-backdrop,
.copy-modal,
.status-help-overlay,
.port-trips-modal-overlay,
.timeline-modal{
  overscroll-behavior:contain;
}